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>

这里写图片描述

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