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 a attribute named value which is used to return the value of value attribute of the <li> tag
Syntax:
document.getElementById("ID");
Where “id” is the ID assigned to the “li” tag.
Example-1:
html
<!DOCTYPE html><html><head> <title>DOM li Object</title></head><body> <h1>GeeksforGeeks</h1> <h2>DOM Li Object </h2> <ol> <!-- Assigning id to 'li tag' --> <li id="GFG">Geeks</li> <li>Sudo</li> <li>Gfg</li> <li>Gate</li> <li>Placement</li> </ol> <button onclick="myGeeks()">Submit</button> <script> function myGeeks() { // Accessing 'li' tag. var g = document.getElementById("GFG"); g.value = "100"; } </script></body></html> |
Output:
Before Clicking On Button:
After Clicking On Button:
Example-2: <li> Object can be created by using the document.createElement method.
html
<!DOCTYPE html><html><head> <title>DOM li Object</title></head><body> <h1>GeeksforGeeks</h1> <h2>DOM Li Object </h2> <ol ID="GFG"> <li>Geeks</li> <li>Sudo</li> <li>Gfg</li> <li>Gate</li> </ol> <button onclick="myGeeks()">Submit</button> <script> function myGeeks() { // li tag created. var G = document.createElement("LI"); var F = document.createTextNode("Placement"); G.appendChild(F); document.getElementById("GFG").appendChild(G); } </script></body></html> |
Output:
Before Clicking On Button:
After Clicking On Button:
Supported Browsers: The browser supported by DOM Li Object are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Please Login to comment...