The HTML DOM DD object is associated with the HTML <dd> element present inside the Definition list denoted by <dl> element in the HTML document.
Syntax
Following is the syntax for −
Creating a DD object −
var p = document.createElement("DD");Example
Let us look at an example for the HTML DOM DD object −
<!DOCTYPE html>
<html>
<body>
<h2>dd object example</h2>
<p>Click the button below to create a dd element with some text in it</p>
<button onclick="create_dd()">CREATE</button><br><br>
<dl id="DL1">
<dt>Mango</dt>
</dl>
<script>
function create_dd() {
var d = document.createElement("DD");
var txt = document.createTextNode("Mango is called the king of fruits.");
d.appendChild(txt);
var ele= document.getElementById("DL1");
ele.appendChild(d);
}
</script>
</body>
</html>Output
This will produce the following output −
On clicking the CREATE button −
In the above example −
We have created a definition list with id “DL1”. It has a <dt> element inside it −
<dl id="DL1"> <dt>Mango</dt> </dl>
We have then created a button CREATE that will execute the create_dd() method when clicked by the user −
<button onclick="create_dd()">CREATE</button><br><br>
The create_dd() method creates a <dd> element using the createElement() method on the document object and assigns it to the variable d. It then creates a text node using the createTextNode() method and assigns it to the variable txt. The text node is then appended as the child of the <dd> element using the appendChild() method.
The <dd> element along with the text node is then appended as the child of the definition list by again using the appendChild() method−
function create_dd() {
var d = document.createElement("DD");
var txt = document.createTextNode("Mango is called the king of fruits.");
d.appendChild(txt);
var ele= document.getElementById("DL1");
ele.appendChild(d);
}