JS 利用appendChild對標籤進行排序

這裏寫圖片描述
按照從大到小排序

appendChild:
假設父級a中已經有子節點b,那麼a.appendChild(b)的作用是:1.先將子節點b從父級a中刪除;2.再將子節點b添加到a中,放在最末尾。

<body>
    <button id="bt1">提交</button>
    <ul id="ul1"> 
        <li>32</li>
        <li>243</li>
        <li>43</li>
        <li>24</li>
        <li id="t">2</li>
        <li>84</li>
        <li>84</li>
        <li>25</li>
    </ul>
</body>
    <script>
    window.onload=function(){
    var oUl1=document.getElementById('ul1');
    var oBt=document.getElementById('bt1');

    oBt.onclick=function(){
    var oLi=document.getElementsByTagName('li');

    var arr=[];
    //將<li>標籤放入空的arr數組中
    for(var i=0;i<oLi.length;i++){
        arr[i]=oLi[i]; 
         }
    //sort排序,數組中每個元素都是一個<li>,所以要用innerHTML
    arr.sort(function(li1,li2){
        var n1=parseInt(li1.innerHTML);
        var n2=parseInt(li2.innerHTML);   
        return n1-n2;  
    })
    //通過appendChild進行排序
    for(var i=0;i<arr.length;i++){
        oUl1.appendChild(arr[i]);
    }   
    }
    }
    </script>

這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章