Tutorials using JS
Get items of a list
given a list (ordered or unordered), get all the items (li elements) in the list using JavaScript
Solution
since the list items are the children of given list, we can access the list items in the list using Element.children
property
list.children
Program
in the following HTML code, we have a list element with four items in it. when user clicks on the button, we get the items in the list using children
property. we use a for loop to iterate over the items, and print them to console output
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Tutorial</h1>
<h2>Get items in list</h2>
<button id="myBtn">Click me</button><br>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<pre id="output"></pre>
<script>
document.getElementById("myBtn").addEventListener("click", function() {
const list = document.getElementById("myList");
//get items in the list
const items = list.children;
//iterate over each of the items using loop
for ( let i = 0; i < items.length; i++ ) {
document.getElementById("output").innerHTML += items[i].textContent + "\n";
}
});
</script>
</body>
</html>