HTML DOM DD Object

Last Updated : 13 Jun, 2023

The DOM DD Object is used to represent the HTML <DD> element. The DD element is accessed by getElementById().

Syntax:

document.getElementById("ID");

Where “id” is the ID assigned to the “dd” tag.

Example 1: In this example, we will use DOM DD Object.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>HTML dd Tag</title>
    <style>
        h1 {
            color: green;
        }
        h1,
        h2 {
            text-align: center;
        }
        body {
            width: 70%;
        }
        dt {
            color: red;
        }
    </style>
</head>
<body>
    <h1>GeeksForGeeks</h1>
    <h2>DOM <dd> Object</h2>
    <dl>
        <dt>Geeks Classes</dt>
        <!-- Assigning id to dd -->
        <dd id="GFG">
            It is an extensive classroom
            programme for enhancing DS and Algo concepts.
        </dd>
        <br>
        <dt>Fork Python</dt>
        <dd>
            It is a course designed for beginners in python.
        </dd>
        <br>
        <dt>Interview Preparation</dt>
        <dd>
            It is a course designed for preparation
            of interviews in top product based companies.
        </dd>
    </dl>
    <button onclick="myGeeks()">
        Submit
    </button>
    <p id="sudo">
    </p>
    <script>
        function myGeeks() {
            <!-- Accessing of dd object. -->
            let g =
                document.getElementById("GFG").innerHTML;
            document.getElementById("sudo").innerHTML
                = g;
        }
    </script>
</body>
</html>

Output:

Example 2: DD Object can be created by using the document.createElement Method.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>HTML dd Tag</title>
    <style>
        h1 {
            color: green;
        }
        h1,
        h2 {
            text-align: center;
        }
        body {
            width: 70%;
        }
        dt {
            color: red;
        }
    </style>
</head>
<body>
    <h1>GeeksForGeeks</h1>
    <h2>DOM <dd> Object</h2>
    <button onclick="myGeeks()">Submit</button>
    <dl id="GFG">
        <dt>Geeks Classes</dt>
    </dl>
    <script>
        function myGeeks() {
            let g = document.createElement("DD");
            let f = document.createTextNode(
                "It is an extensive classroom for"
                + " enhancing DS and Algo concepts.");
            g.appendChild(f);

            let w = document.getElementById("GFG");
            w.appendChild(g);
        }
    </script>
</body>
</html>