JavaScript 如何对HTML列表进行排序

在本文中，我们给出了一个元素列表，并且任务是使用JavaScript将它们按字母顺序排序并将每个元素放入列表中。我们有一种使用JavaScript对HTML列表进行排序的方法，如下所述：

insertBefore()方法
insertBefore()方法： HTML DOM中的insertBefore()方法用于在现有节点之前插入一个新节点。

语法：

node.insertBefore( newnode, existingnode )

示例： 在本示例中，选择列表元素然后将它们传递给一个排序函数。排序完成后，使用insertBefore() 方法将它们按照排序的方式追加到父元素中。

<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>

输出:

JavaScript 如何对HTML列表进行排序