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
How to sort an HTML list using JavaScript?
Sorting an HTML list with JavaScript involves manipulating the DOM elements to reorder list items based on their content. Here are two effective approaches to accomplish this.
Method 1: Using Array Methods (Recommended)
This modern approach converts list items to an array, sorts them, and rebuilds the list:
<!DOCTYPE html>
<html>
<head>
<title>Sort HTML List</title>
</head>
<body>
<h1>Animal List Sorting</h1>
<button onclick="sortList()">Sort Alphabetically</button>
<ul id="animalList">
<li>Zebra</li>
<li>Elephant</li>
<li>Bear</li>
<li>Tiger</li>
<li>Ant</li>
<li>Dog</li>
</ul>
<script>
function sortList() {
const list = document.getElementById('animalList');
const items = Array.from(list.getElementsByTagName('li'));
// Sort items alphabetically
items.sort((a, b) => {
return a.textContent.toLowerCase().localeCompare(b.textContent.toLowerCase());
});
// Clear the list and append sorted items
list.innerHTML = '';
items.forEach(item => list.appendChild(item));
}
</script>
</body>
</html>
Method 2: Bubble Sort Implementation
This approach uses a bubble sort algorithm to swap adjacent elements:
<!DOCTYPE html>
<html>
<head>
<title>Bubble Sort List</title>
</head>
<body>
<h1>Sorting List Example</h1>
<button onclick="bubbleSortList()">Click to Sort</button>
<ul class="animalList">
<li>Giraffe</li>
<li>Camel</li>
<li>Dog</li>
<li>Lion</li>
<li>Cheetah</li>
<li>Cat</li>
</ul>
<script>
function bubbleSortList() {
const list = document.querySelector('.animalList');
let sortFlag = true;
while (sortFlag) {
sortFlag = false;
const listItems = list.getElementsByTagName('li');
for (let i = 0; i < listItems.length - 1; i++) {
const current = listItems[i].textContent.toLowerCase();
const next = listItems[i + 1].textContent.toLowerCase();
if (current > next) {
// Swap the elements
listItems[i].parentNode.insertBefore(listItems[i + 1], listItems[i]);
sortFlag = true;
break;
}
}
}
}
</script>
</body>
</html>
How It Works
Array Method: Converts NodeList to array using Array.from(), sorts with localeCompare(), then rebuilds the list.
Bubble Sort: Compares adjacent elements and swaps them if they're in wrong order, repeating until no swaps are needed.
Comparison
| Method | Performance | Code Simplicity | Browser Support |
|---|---|---|---|
| Array Methods | O(n log n) | Simple | Modern browsers |
| Bubble Sort | O(n²) | Complex | All browsers |
Key Features
-
Case-insensitive sorting: Both methods use
toLowerCase() - Maintains HTML structure: Only reorders elements
- Event-driven: Sorting triggered by button clicks
- DOM manipulation: Direct element repositioning
Conclusion
The Array method is recommended for modern applications due to better performance and cleaner code. Use bubble sort only when supporting older browsers or understanding the algorithm is important.
1K+ Views
