How to sort an HTML list using JavaScript ?

Last Updated : 12 Jan, 2023

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>

Output:

How to sort a set in JavaScript ?

aditya_taparia

Improve

Article Tags :

How to sort an HTML list using JavaScript ?

Similar Reads

Thank You!

What kind of Experience do you want to share?