js利用appendChild对<li>标签进行排序的实现方法
2016-10-16 00:00
841 查看
![](http://files.jb51.net/file_images/article/201610/2016101609321012.jpg)
按照从大到小排序
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>
![](http://files.jb51.net/file_images/article/201610/201610160932521.jpg)
以上就是小编为大家带来的js利用appendChild对标签进行排序的实现方法全部内容了,希望大家多多支持脚本之家~
您可能感兴趣的文章:
javascript使用appendChild追加节点实例js AppendChild与insertBefore用法详细对比
初学js插入节点appendChild insertBefore使用方法
相关文章推荐
- js利用appendChild对<li>标签进行排序的实现方法
- JS 利用appendChild对<li>标签进行排序
- <table>标签 利用DOM 的方法和属性实现对表格的动态操作
- js实现图片放大缩小功能后进行复杂排序的方法
- 笔记:JS利用正则表达式实现去除Html标签方法
- 四种方法js实现点击<li>弹出索引
- js实现点击<li>标签弹出其索引值
- js实现图片放大缩小功能后进行复杂排序的方法
- html的<a>标签点击触发js函数的3种方法
- <img>等标签在指定容器中水平垂直居中的几种实现方法
- 如何去掉友情链接的<li>标签的三种方法
- 鼠标点击页面中的任意标签,alert该标签的名称和 js实现点击<li>标签弹出其索引值
- <a>标签中的onclick调用js方法传递多个参数的解决方案
- <转>在xslt中实现split方法对查询字符串进行分隔
- <HTTP>ASI实现的注册方法:利用http的get和post两种方式
- <li><img>图片间有空隙的解决方法
- Java:对集合中的对象进行排序需要实现Interface Comparable接口并实现int compareTo(T o)方法
- (原创)Hibernate学生选课,实现课程按照学生人数进行排序的方法
- js,jQuery 排序的实现,网页标签排序的实现,标签排序
- 数组排序方法的性能比较(2):Array.Sort<T>实现分析