How to sort an HTML list using JavaScript ?

0 0 1 minute read

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

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>