HTML | DOM DT Object

Last Updated : 30 Jun, 2021

The DOM dt object is used to represent the HTML <dt> element. The dt element can be accessed using the getElementById() method.

Syntax:

document.getElementById("id");

Where ‘id’ is the ID assigned to the dt tag.

Example-1:

html

<!DOCTYPE html> 
<html> 
<body> 
        <h1 style = "color:green;" > 
          GeeksForGeeks 
        </h1> 

        <h2>DOM DT Object</h2> 

        <dl>
            <dt id="id">Sorting</dt>
            <dd>Merge sort</dd>
        </dl>
        
        <button onclick="Geeks()">Click Here!</button>
        
        <p id="demo" style="color:green"></p>


        
        <script>
        function Geeks() {
            var doc = document.getElementById("id").innerHTML;

            document.getElementById("demo").innerHTML = doc;
        }
        </script>
</body> 
</html>

Output:
Before clicking on button:

After clicking on button:

Example-2: DT Object can be created by using the document.createElement method.

html

<!DOCTYPE html> 
<html> 
<body> 
        <h1 style = "color:green;" > 
          GeeksForGeeks 
        </h1> 

        <h2>DOM DT Object</h2> 

        <button onclick="Geeks()">Click Here!</button><br>

        <script>
        function Geeks() {
            var doc = document.createElement("DL");
            doc.setAttribute("id", "dl");
            document.body.appendChild(doc);
          
            // Creating a DT element
            var doc1 = document.createElement("DT");
            var txt1 = document.createTextNode("Sorting");
            doc1.appendChild(txt1);
            doc1.setAttribute("id", "dt");
            document.getElementById("dl").appendChild(doc1);
          
            // Creating a dd element
            var doc2 = document.createElement("DD");
            var txt2 = document.createTextNode("Merge sort");
            doc2.appendChild(txt2);
            document.getElementById("dl").appendChild(doc2);
        }
        </script>
</body> 
</html>

Output:
Before clicking on button:

After clicking on button:

Supported Browsers:

Google Chrome
Mozilla Firefox
Edge
Safari
Opera

V

Vishal Chaudhary 2

Improve

Article Tags :

Similar Reads

HTML | DOM Style emptyCells Property

Sometimes HTML tables contain empty cells. The DOM Style emptyCells is used to display borders and background for the empty cells. Syntax: It is used to return the emptyCells property.object.style.emptyCellsIt is used to set emptyCells property.object.style.emptyCells = "show|hide|initial|inherit" R

HTML DOM UiEvent

The DOM UiEvent in HTML is an event that is triggered by the user interface belonging to the UiEvent Object. The two main purposes of the UI Event are: Allows registration of event listeners and describes event flow through a tree structure.Provide a common subset of the current event systems used i

HTML | DOM Style backgroundPosition Property

The HTML DOM Style backgroundPosition : It sets or returns position of the background-image in an element. Syntax: To get the backgroundPosition propertyobject.style.backgroundPositionTo set the backgroundPosition propertyobject.style.backgroundPosition = value Return Values: It returns a string val

HTML DOM Article Object

The DOM article object is used to represent the HTML <article> element. The article element can be accessed using the getElementById() method. Syntax: document.getElementById("id"); Where â€˜idâ€™ is the ID assigned to the article tag. Example 1: In the below program the article object is accessed

HTML DOM li Object

The DOM Li Object is used to represent the HTML <li> element. The li element is accessed by getElementById(). Properties: value: It has an attribute named value which is used to return the value of the value attribute of the <li> tag. Syntax: document.getElementById("ID"); Where â€œidâ€ is

HTML DOM Legend Object

The DOM Legend Object is used to represent the HTML <legend> element. The legend element is accessed by getElementById(). Properties: Form: it is used to return the reference of the form that contains the legend element. Syntax: document.getElementById("ID">); Where â€œidâ€ is the ID assigned

HTML DOM HR Object

The DOM HR Object is used to represent the HTML <hr> element. The hr element is accessed by getElementById(). Properties: Align: It is used to set or return the alignment of a horizontal element.color: It is used to set or return the color of the horizontal element.noshade: It is used to set o

HTML DOM Header Object

The DOM header object is used to represent the HTML <header> element. The header element can be accessed by the getElementById() method. Syntax: document.getElementById("id"); Where â€˜idâ€™ is the ID assigned to the header tag. Example 1: In the below program the header element is accessed and th

HTML DOM Style border Property

The HTML DOM Style border Property is used to set or return the style of an element's border. We can set the different styles of the border for individual sides (top, right, bottom, left). The border-style property can take multiple values for each side.Â SyntaxIt is used to return the Style Propert

HTML DOM Span Object

The DOM span object is used to represent the HTML <span> element. The span element can be accessed by using the getElementById() method. Syntax: document.getElementById("id"); Where 'id' is the ID assigned to the span tag. Example 1: In the below program the content inside the span element is