Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM li Object
The HTML DOM Li Object represents the <li> (list item) element in the Document Object Model. This object provides properties and methods to manipulate list items dynamically using JavaScript.
Accessing Li Objects
You can access existing <li> elements using various DOM methods −
// Get li element by ID
var liElement = document.getElementById("myListItem");
// Get all li elements
var allLiElements = document.getElementsByTagName("li");
// Get li elements by class name
var liByClass = document.getElementsByClassName("list-item");
Creating Li Objects
Following is the syntax to create a new <li> element −
var liObject = document.createElement("LI");
After creating the element, you can set its properties and append it to a list −
liObject.textContent = "New list item";
document.getElementById("myList").appendChild(liObject);
Properties
The Li Object supports the following property −
| Property | Description |
|---|---|
| value | Sets or returns the value of the value attribute of a <li> element. This is primarily used with ordered lists (<ol>) to specify the ordinal value. |
Note − The value property only affects ordered lists (<ol>). It sets the number from which the list item counting should start or continue.
Example − Basic Li Object Usage
Following example demonstrates creating and manipulating Li objects −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Li Object</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic List Management</h2>
<ol id="myList">
<li>First item</li>
<li>Second item</li>
</ol>
<button onclick="addItem()">Add Item</button>
<button onclick="removeItem()">Remove Last Item</button>
<script>
function addItem() {
var newLi = document.createElement("LI");
newLi.textContent = "New item " + (Date.now() % 1000);
document.getElementById("myList").appendChild(newLi);
}
function removeItem() {
var list = document.getElementById("myList");
if (list.children.length > 0) {
list.removeChild(list.lastElementChild);
}
}
</script>
</body>
</html>
This example allows you to dynamically add and remove list items by clicking the buttons.
Example − Li Value Property
Following example demonstrates the value property usage in an ordered list −
<!DOCTYPE html>
<html>
<head>
<title>Li Value Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Race Result Management</h2>
<ol id="race">
<li>Alex</li>
<li>Eden</li>
<li>Samuel</li>
<li>Zampa</li>
</ol>
<button onclick="rectifyResult()">Alex Cheated - Disqualify</button>
<div id="divDisplay" style="margin-top: 10px; font-weight: bold; color: red;"></div>
<script>
var divDisplay = document.getElementById("divDisplay");
var studentList = document.getElementsByTagName("li");
var race = document.getElementById("race");
function rectifyResult() {
// Set new values for remaining positions
studentList[1].value = '1';
studentList[2].value = '2';
studentList[3].value = '3';
// Remove Alex from the list
race.removeChild(studentList[0]);
divDisplay.textContent = 'Alex is disqualified. List updated with correct positions.';
}
</script>
</body>
</html>
Before clicking the button, the list shows the original race results. After clicking "Alex Cheated - Disqualify", Alex is removed and the remaining participants get updated position values −
Original: 1. Alex 2. Eden 3. Samuel 4. Zampa Updated: 1. Eden 2. Samuel 3. Zampa Message: "Alex is disqualified. List updated with correct positions."
Example − Setting Custom List Values
Following example shows how to set custom starting values for list items −
<!DOCTYPE html>
<html>
<head>
<title>Custom List Values</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Custom Numbered List</h2>
<ol id="customList">
<li>Chapter Introduction</li>
<li>Chapter Content</li>
<li>Chapter Conclusion</li>
</ol>
<button onclick="setCustomValues()">Start from Chapter 5</button>
<button onclick="resetValues()">Reset to Chapter 1</button>
<script>
function setCustomValues() {
var items = document.querySelectorAll("#customList li");
items[0].value = 5;
items[1].value = 6;
items[2].value = 7;
}
function resetValues() {
var items = document.querySelectorAll("#customList li");
items[0].value = 1;
items[1].value = 2;
items[2].value = 3;
}
</script>
</body>
</html>
This example demonstrates how the value property can change the numbering sequence of ordered list items.
Default: 1. Chapter Introduction 2. Chapter Content 3. Chapter Conclusion Custom: 5. Chapter Introduction 6. Chapter Content 7. Chapter Conclusion
Key Points
-
The Li Object represents
<li>elements in the DOM and provides methods to manipulate list items programmatically. -
The
valueproperty only works with ordered lists (<ol>) and sets the numeric value from which counting should continue. -
You can create new Li objects using
document.createElement("LI")and append them to existing lists. -
Li objects inherit all standard DOM element properties and methods like
textContent,innerHTML,addEventListener, etc.
Conclusion
The HTML DOM Li Object provides essential functionality for dynamically managing list items in web applications. The value property allows precise control over ordered list numbering, while standard DOM methods enable creating, accessing, and modifying list items programmatically.
216 Views
