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


Posted in Javascript onOctober 16, 2016

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>

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

以上就是小编为大家带来的js利用appendChild对标签进行排序的实现方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
关于JavaScript中的关联数组分析
Apr 09 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
jQuery 设置 CSS 属性示例介绍
Jan 16 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
AngularJS上拉加载问题解决方法
May 23 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
Sep 09 Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
May 07 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
Dec 28 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 #Javascript
JS实现禁止鼠标右键的功能
Oct 15 #Javascript
Vue.js快速入门实例教程
Oct 15 #Javascript
JavaScript随机生成颜色的方法
Oct 15 #Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 #Javascript
js控制div层的叠加简单方法
Oct 15 #Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
Oct 15 #Javascript
You might like
ie与session丢失(新窗口cookie丢失)实测及解决方案
2013/07/15 PHP
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
thinkPHP模板中函数的使用方法示例
2016/11/30 PHP
php获取微信openid方法总结
2019/10/10 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
2020/06/06 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
2014/10/29 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
js笔试题-接收get请求参数
2019/06/15 Javascript
浅析Python 中整型对象存储的位置
2016/05/16 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
Django表单提交后实现获取相同name的不同value值
2020/05/14 Python
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
公司联欢会策划方案
2014/05/19 职场文书
教师工作表现自我评价
2015/03/05 职场文书
公司催款律师函
2015/05/27 职场文书
宇宙与人观后感
2015/06/05 职场文书
应收账款管理制度
2015/08/06 职场文书
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python