HTML DOM DD object


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);
}
raja
Published on 08-Aug-2019 13:48:14
Advertisements