In this article, we are given a list of elements and the task is to sort them alphabetically and put each element in the list with the help of JavaScript. We have a method to sort an HTML list using JavaScript that are described below:
insertBefore() method: The insertBefore() method in HTML DOM is used to insert a new node before the existing node as specified by the user.
Syntax:
node.insertBefore( newnode, existingnode )
Example: In this example, the list elements are selected and then passed to a function for sorting. After sorting they are appended to the Parent element using the insertBefore() method in a sorted manner.
HTML
<body> <h1 style="text-align:center; color: forestgreen;"> GeeksForGeeks </h1> <p style="text-align:center; font-size: 15px; font-weight: bold;"> Click on the button to sort the list </p> <ul style="color: crimson;" id="GeekList"> <li>Geeks</li> <li>For</li> <li>GFG</li> <li>GeeksForGeeks</li> </ul> <br> <center> <button style="color: crimson;" onclick="sort()"> Click Here To Sort </button> </center> <script> function sort() { // Declaring Variables var geek_list, i, run, li, stop; // Taking content of list as input geek_list = document.getElementById("GeekList"); run = true; while (run) { run = false; li = geek_list.getElementsByTagName("LI"); // Loop traversing through all the list items for (i = 0; i < (li.length - 1); i++) { stop = false; if (li[i].innerHTML.toLowerCase() > li[i + 1].innerHTML.toLowerCase()) { stop = true; break; } } /* If the current item is smaller than the next item then adding it after it using insertBefore() method */ if (stop) { li[i].parentNode.insertBefore( li[i + 1], li[i]); run = true; } } } </script> </body> |
Output:
Sort an HTML list
