HTML | DOM DList Object
The DOM DList Object is used to represent the HTML <dl> tag. The Dlist element is accessed by getElementById().
Syntax:
document.getElementById("ID");<
Where “id” is the ID assigned to the “dl” tag.
Example-1:
html
<!DOCTYPE html><html><head> <title>HTML DOM DList Object</title> <style> h1, h2 { text-align: center; } h1 { color: green; } dl { margin-left: 20%; } button { margin-left: 30%; } </style></head><body> <h1>GeeksforGeeks</h1> <h2>DOM DList Object</h2> <!-- Assigning id to 'dl' tag --> <dl id="GFG"> <dt>GeeksforGeeks</dt> <dd>A Computer Science Portal For Geeks</dd> </dl> <button onclick="myGeeks()">Submit</button> <p id="sudo"></p> <script> function myGeeks() { <!-- Accessing 'dl'. --> var g = document.getElementById("GFG").innerHTML; document.getElementById("sudo").innerHTML = g; } </script></body></html> |
Output:
Before Clicking On Button:
After Clicking On Button:
Example-2: DList Object can be created by using the document.createElement method.
html
<!DOCTYPE html><html><head> <title>HTML DOM DList Object </title> <style> h1, h2 { text-align: center; } h1 { color: green; } dl { margin-left: 20%; } button { margin-left: 30%; } </style></head><body> <h1>GeeksforGeeks</h1> <h2>DOM DList Object</h2> <button onclick="myGeeks()">Submit</button> <script> function myGeeks() { var g = document.createElement("DL"); g.setAttribute("id", "GFG"); document.body.appendChild(g); var f = document.createElement("DT"); var text = document.createTextNode("GeeksForGeeks"); f.appendChild(text); document.getElementById("GFG").appendChild(f); var z = document.createElement("DD"); var text2 = document.createTextNode( "A Computer Science PortaL For Geeks"); z.appendChild(text2); document.getElementById("GFG").appendChild(z); } </script></body></html> |
Output:
Before Clicking On Button:
After Clicking On Button:
Supported Browsers: The browser supported by DOM DList Object are listed below.
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Please Login to comment...