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 相关文章推荐
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
js中关于new Object时传参的一些细节分析
Mar 13 Javascript
jquery使用ajax实现微信自动回复插件
Apr 28 Javascript
jQuery中:text选择器用法实例
Jan 03 Javascript
详解iframe与frame的区别
Jan 13 Javascript
jquery实现一个简单的表单验证实例
Mar 30 Javascript
Vue.js学习笔记之 helloworld
Aug 14 Javascript
AngularJS  自定义指令详解及实例代码
Sep 14 Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
JavaScript 类的封装操作示例详解
May 16 Javascript
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
浅谈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
Parse正式发布开源PHP SDK
2014/08/11 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
老生常谈PHP面向对象之命令模式(必看篇)
2017/05/24 PHP
Laravel框架实现超简单的分页效果示例
2019/02/08 PHP
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
举例详解Python中的split()函数的使用方法
2015/04/07 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
python中不能连接超时的问题及解决方法
2018/06/10 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
Python虚拟环境库virtualenvwrapper安装及使用
2020/06/17 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
大学生护理专业自荐信
2013/10/03 职场文书
应届生人事助理求职信
2013/11/09 职场文书
优秀教师主要事迹
2014/02/01 职场文书
《理想》教学反思
2014/02/17 职场文书
司法所长先进事迹
2014/06/02 职场文书
应用心理学专业求职信
2014/08/04 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
公务员检讨书
2014/11/01 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
拉贝日记观后感
2015/06/05 职场文书
运动会开幕式致辞
2015/07/29 职场文书
高考百日冲刺决心书
2015/09/23 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书
node快速搭建后台的实现步骤
2022/02/18 NodeJs
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers