Open In App

How to sort an HTML list using JavaScript ?

Last Updated : 12 Jan, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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

Sort an HTML list



Similar Reads

Javascript Program For Insertion Sort In A Singly Linked List
We have discussed Insertion Sort for arrays. In this article we are going to discuss Insertion Sort for linked list. Below is a simple insertion sort algorithm for a linked list. 1) Create an empty sorted (or result) list. 2) Traverse the given list, do following for every node. ......a) Insert current node in sorted way in sorted or result list. 3
3 min read
Javascript Program For Recursive Selection Sort For Singly Linked List - Swapping Node Links
Given a singly linked list containing n nodes. The problem is to sort the list using the recursive selection sort technique. The approach should be such that it involves swapping node links instead of swapping node data. Examples: Input: 10 -&gt; 12 -&gt; 8 -&gt; 4 -&gt; 6 Output: 4 -&gt; 6 -&gt; 8 -&gt; 10 -&gt; 12 In Selection Sort, we first find
4 min read
Javascript Program For Merge Sort For Doubly Linked List
Given a doubly linked list, write a function to sort the doubly linked list in increasing order using merge sort.For example, the following doubly linked list should be changed to 24810 Recommended: Please solve it on "PRACTICE" first, before moving on to the solution. Merge sort for singly linked list is already discussed. The important change her
3 min read
How to return HTML or build HTML using JavaScript ?
JavaScript is very powerful and with it, we can build dynamic web content and add many features to a web application. With HTML, we create the structure of the web page and the same thing can also be done with JavaScript. There are a few JavaScript methods called as createElement(), appendChild() with which we can add nodes to the DOM tree on the f
2 min read
Create a Drag and Drop Sortable List using HTML CSS & JavaScript
In this article, we will create a drag-and-drop sortable list using HTML, CSS, and JavaScript. This interactive feature will allow users to reorder items in a list by simply dragging and dropping them. Preview of final output: Let us have a look at how the final output will look like. [caption width="800"]drag and drop sortable list[/caption]Prereq
3 min read
Javascript Program For Finding The Length Of Longest Palindrome List In A Linked List Using O(1) Extra Space
Given a linked list, find the length of the longest palindrome list that exists in that linked list. Examples: Input : List = 2-&gt;3-&gt;7-&gt;3-&gt;2-&gt;12-&gt;24 Output : 5 The longest palindrome list is 2-&gt;3-&gt;7-&gt;3-&gt;2 Input : List = 12-&gt;4-&gt;4-&gt;3-&gt;14 Output : 2 The longest palindrome list is 4-&gt;4 Recommended: Please sol
3 min read
Convert Singly Linked List into Circular Linked List using JavaScript
We are given a singly linked list and we need to convert it into a circular linked list, where the last node points back to the head of the list. Converting a singly linked list into a circular linked list involves making the last node's next pointer point back to the head, creating a circular structure. This transformation enables traversal from t
3 min read
How to sort a list alphabetically using jQuery ?
Given a list of elements, The task is to sort them alphabetically and put each element in the list with the help of jQuery. jQuery text() Method: This method set/return the text content of the selected elements. If this method is used to return content, it provides the text content of all matched elements (HTML tags will be removed). If this method
3 min read
JavaScript Program to find Length of Linked List using JavaScript
Given a linked list, the task is to determine its length using various methods. The linked list is a fundamental data structure consisting of nodes connected in a chain, offering efficient data organization. Different approaches, including Iterative and Recursive Methods, enable us to compute the length of a linked list easily. Use the below approa
3 min read
How to sort rows in a table using JavaScript ?
Since JavaScript doesn't provide any inbuilt functions to sort a table we will be required to use native methods to sort a given table. We will look into the methods in this article. Approach: A basic algorithm and a similar approach will be used for both of the following examples. Loop the program to switch and sort the elements until it is sorted
4 min read