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 相关文章推荐
(function(){})()的用法与优点
Mar 11 Javascript
prototype Element学习笔记(Element篇三)
Oct 26 Javascript
Mootools 1.2教程(21)——类(二)
Sep 15 Javascript
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
Jan 31 Javascript
JS判断、校验MAC地址的2个实例
May 05 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
微信小程序 行的删除和增加操作实现详解
Sep 29 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 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
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
jquery中ajax学习笔记3
2011/10/16 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
12步教你理解Python装饰器
2016/02/25 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
在Pycharm terminal中字体大小设置的方法
2019/01/16 Python
Python输出指定字符串的方法
2020/02/06 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
世界经理人咨询有限公司面试
2014/09/23 面试题
计算机系毕业生推荐信
2013/11/06 职场文书
后勤部长岗位职责
2013/12/14 职场文书
乌鸦喝水教学反思
2014/02/07 职场文书
有创意的广告词
2014/03/18 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
户籍证明模板
2014/09/28 职场文书
2014年检验员工作总结
2014/11/19 职场文书
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL
python实现手机推送 代码也就10行左右
2022/04/12 Python
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python