HTML | DOM Ul Object
The DOM Ul Object is used to represent the HTML <ul> element .the ul element is accessed by getElementById().
Properties:
- compact: It is used to set or return whether the height of the unordered list would be render smaller than normal, or not.
- type: It is used to set or return the value of the type attribute of an <ul> element.
Syntax:
document.getElementById("ID");Where “id” is the ID assigned to the “ul” tag.
Example-1:
html
<!DOCTYPE html><html><head> <title>DOM ul Object</title></head><body> <h1>GeeksforGeeks</h1> <h2>DOM ul Object </h2> <ul id="Geeks"> <!-- Assigning id to 'li tag' --> <li id="GFG">Geeks</li> <li>Sudo</li> <li>Gfg</li> <li>Gate</li> <li>Placement</li> </ul> <button onclick="myGeeks()">Submit</button> <p id="sudo"></p> <script> function myGeeks() { // Accessing 'ul' tag. var g = document.getElementById( "Geeks").id; document.getElementById( "sudo").innerHTML = g; } </script></body></html> |
Output:
Before Clicking On Button :
After Clicking On Button :
Example-2 : <ul> Object can be created by using the document.createElement method.
html
<!DOCTYPE html><html><head> <title>DOM ul Object</title></head><body> <h1>GeeksforGeeks</h1> <h2>DOM ul Object </h2> <button onclick="myGeeks()">Submit</button> <script> function myGeeks() { // 'ul' tag Created. var g = document.createElement("UL"); g.setAttribute("id", "GFG"); document.body.appendChild(g); var f = document.createElement("LI"); var w = document.createTextNode("Geeks"); f.appendChild(w); document.getElementById("GFG").appendChild(f); var x = document.createElement("LI"); var y = document.createTextNode("Sudo"); x.appendChild(y); document.getElementById("GFG").appendChild(x); } </script></body></html> |
Output:
Before Clicking On Button:
After Clicking On Button:
Supported Browsers: The browsers supported by DOM Ul Object are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Please Login to comment...