如何使用 JavaScript 对 HTML 列表进行排序？

给定一个元素列表，任务是按字母顺序对它们进行排序，并在 JavaScript 的帮助下将每个元素放入列表中。

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

句法：

node.insertBefore( newnode, existingnode )

参数：此方法接受上面提到和下面描述的两个参数：

• newnode：它是必需的参数。该参数包含需要插入的新节点对象。
• 现有节点：它是必需的参数。它描述了新节点在该节点之前插入的位置。如果设置为 null，则 insertBefore 方法将在末尾插入新节点。

示例：在此示例中，选择列表元素，然后将其传递给函数进行排序。排序后，使用 insertBefore() 方法以排序方式将它们附加到 Parent 元素。

HTML

  

    
        Sort a list alphabetically Using JavaScript
    
  
    
        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;
                }
            }
        }
    

  

    
        GeeksForGeeks
    
    
        Click on the button to sort the list
    
  
    
        Geeks
        For
        GFG
        GeeksForGeeks
    
    
  
    
        
            Click Here To Sort
        
    

  

输出：

• 在点击按钮之前：
• 点击按钮后：