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 value Property
The HTML DOM li value property allows you to get or set the value attribute of a <li> element. This property is particularly useful when working with ordered lists where you need to control the numbering sequence or create custom list item values.
Syntax
Following is the syntax for getting the value attribute −
liObject.value
Following is the syntax for setting the value attribute −
liObject.value = "string"
Parameters
-
string − A string value that represents the numeric value for the list item. This must be a valid integer.
Return Value
The property returns a string representing the value of the value attribute. If no value attribute is set, it returns an empty string.
Example − Getting and Setting Li Value
Following example demonstrates how to get and set the value property of list items −
<!DOCTYPE html>
<html>
<head>
<title>Li Value Property Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Course Rankings</h2>
<ol id="courseList">
<li value="1">HTML</li>
<li value="2">CSS</li>
<li value="3">JavaScript</li>
<li>Python</li>
</ol>
<button onclick="showValues()">Show Values</button>
<button onclick="updateValues()">Update Last Item Value</button>
<div id="output" style="margin-top: 10px; padding: 10px; background-color: #f0f0f0;"></div>
<script>
function showValues() {
var listItems = document.getElementsByTagName("li");
var output = document.getElementById("output");
var result = "Current values: ";
for (var i = 0; i < listItems.length; i++) {
result += "Item " + (i + 1) + ": '" + listItems[i].value + "' ";
}
output.textContent = result;
}
function updateValues() {
var listItems = document.getElementsByTagName("li");
listItems[3].value = "4"; // Set value for Python
document.getElementById("output").textContent = "Python item value updated to: " + listItems[3].value;
}
</script>
</body>
</html>
The output shows how the value property works with list items. Initially, some items have values and others don't −
Course Rankings 1. HTML 2. CSS 3. JavaScript 4. Python [Show Values] [Update Last Item Value] (Clicking "Show Values" displays: Current values: Item 1: '1' Item 2: '2' Item 3: '3' Item 4: '') (Clicking "Update Last Item Value" displays: Python item value updated to: 4)
Example − Dynamic List Reordering
Following example shows how to use the value property to dynamically reorder list items −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic List Reordering</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Race Results</h2>
<ol id="raceResults">
<li value="1">Alex</li>
<li value="2">Eden</li>
<li value="3">Samuel</li>
<li value="4">Zampa</li>
</ol>
<button onclick="disqualifyAlex()">Disqualify Alex</button>
<div id="message" style="margin-top: 10px; color: red; font-weight: bold;"></div>
<script>
function disqualifyAlex() {
var raceList = document.getElementById("raceResults");
var listItems = raceList.getElementsByTagName("li");
// Remove Alex (first item)
raceList.removeChild(listItems[0]);
// Update remaining items
var remainingItems = raceList.getElementsByTagName("li");
for (var i = 0; i < remainingItems.length; i++) {
remainingItems[i].value = (i + 1).toString();
}
document.getElementById("message").textContent = "Alex disqualified! Results updated.";
}
</script>
</body>
</html>
After clicking "Disqualify Alex", the first item is removed and the remaining items are renumbered −
Before: 1. Alex, 2. Eden, 3. Samuel, 4. Zampa After: 1. Eden, 2. Samuel, 3. Zampa Message: Alex disqualified! Results updated.
Key Points
-
The
valueproperty only works with<li>elements inside ordered lists (<ol>). -
Setting a value changes the numbering for that specific list item and affects subsequent items.
-
The value must be a positive integer. Invalid values may not display correctly.
-
If no value attribute is set, the property returns an empty string.
-
The value property allows you to create non-sequential numbering in ordered lists.
Conclusion
The HTML DOM li value property provides a way to control the numbering of individual list items in ordered lists. It's particularly useful for creating custom numbering sequences, reordering lists dynamically, or displaying non-sequential numbers in your list presentation.
218 Views
