How to sort an HTML list using JavaScript ?

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:

Sort an HTML list

How to sort an HTML list using JavaScript ?

A

aditya_taparia

Improve

Article Tags :

Similar Reads

Drag and Drop Sortable List Using HTML CSS & JavaScript

The Drag and Drop Sortable List Project in JavaScript allows users to easily reorder items in a list using drag-and-drop functionality. This interactive tool enhances user experience by enabling smooth, dynamic list organization, ideal for applications like task managers or shopping lists.What we ar

How to create an ordered list using HTML5 ?

In this article, we define an ordered list by using the <ol> tag in the document, This tag is used for ordered list, an ordered list can be numerical or alphabetical. Inside the <ol> tag you have to make a list li of items that will follow the order. Syntax: <ol> <li>Item1

Sort a String in JavaScript

Here are the most used methods to sort characters in a string using JavaScript.Using split(), sort(), and join()The most simple way to sort a string is to first convert it to an array of characters, sort the array, and then join it back into a string.JavaScriptlet s1 = "javascript"; let s2 = s1.spli

JavaScript - How to Sort Rows in a Table?

Rows in a table are horizontal sections that hold data, organizing information across columns in a structured, easy-to-read format. To sort table rows in JavaScript, create a function that compares rows based on cell values. Use a loop to check and swap rows as needed until all rows are in order.App

How to create HTML List from JavaScript Array?

Creating an HTML list from a JavaScript array allows you to dynamically generate <ul> (unordered) or <ol> (ordered) lists and fill them with data directly from your array. This is useful when you want to display array data in a structured way on your webpage. In this guide, weâ€™ll go thro