HTML | DOM Ul Object
The DOM Ul Object is used to represent the HTML <ul> element .the ul element is accessed by getElementById().
Properties:
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 >w3wiki</ h1 > < h2 >DOM ul Object </ h2 > < ul id = "Beginner" > <!-- Assigning id to 'li tag' --> < li id = "GFG" >Beginner</ li > < li >Sudo</ li > < li >Gfg</ li > < li >Gate</ li > < li >Placement</ li > </ ul > < button onclick = "myBeginner()" >Submit</ button > < p id = "sudo" ></ p > < script > function myBeginner() { // Accessing 'ul' tag. var g = document.getElementById( "Beginner").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 >w3wiki</ h1 > < h2 >DOM ul Object </ h2 > < button onclick = "myBeginner()" >Submit</ button > < script > function myBeginner() { // '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("Beginner"); 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