当前位置:主页 > 网页前端 > JavaScript代码 >

js利用appendChild对
  • 标签进行排序的实现方法
  • 时间:2022-06-30 09:28:48 | 栏目:JavaScript代码 | 点击:

    按照从大到小排序

    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>

    您可能感兴趣的文章:

    相关文章