当前位置：首页 > 资讯 > 技术文档

js利用appendChild对<li>标签进行排序的实现方法

时间：2022-02-22 15:07 编辑：来源：阅读：
扫一扫，手机访问

摘要：js利用appendChild对<li>标签进行排序的实现方法

[img]http://files.jb51.net/file_images/article/201610/2016101609321012.jpg[/img] 按照从大到小排序 [b]appendChild： [/b] 假设父级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>

[img]http://files.jb51.net/file_images/article/201610/201610160932521.jpg[/img] 以上就是小编为大家带来的js利用appendChild对标签进行排序的实现方法全部内容了，希望大家多多支持编程素材网~

全部评论(0)

上一篇：bootstrap weebox 支持ajax的模态弹出框
下一篇：JS动态添加的div点击跳转到另一页面实现代码

资讯排行榜
更多>>

js利用appendChild对&lt;li&gt;标签进行排序的实现方法

js利用appendChild对<li>标签进行排序的实现方法