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 相关文章推荐
javascript 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
javascript 寻找错误方法整理
Jun 15 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 Javascript
JavaScript实现经纬度转换成地址功能
Mar 28 Javascript
获取url中用&amp;隔开的参数实例(分享)
May 28 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 Javascript
vue 对axios get pust put delete封装的实例代码
Jan 05 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 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
中国收音机工业发展史
2021/03/02 无线电
用PHP实现维护文件代码
2007/06/14 PHP
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
初识laravel5
2015/03/02 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
javascript IFrame 强制刷新代码
2009/07/23 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
python下MySQLdb用法实例分析
2015/06/08 Python
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
python虚拟环境迁移方法
2019/01/03 Python
Python 实现文件打包、上传与校验的方法
2019/02/13 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
django修改models重建数据库的操作
2020/03/31 Python
哪些是python中web开发框架
2020/06/17 Python
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
运动会广播稿150字
2014/02/19 职场文书
小学生安全演讲稿
2014/04/25 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
户籍证明模板
2014/09/28 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
酒店财务经理岗位职责
2015/04/08 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL
pandas进行数据输入和输出的方法详解
2022/03/23 Python
Go语言入门exec的基本使用
2022/05/20 Golang
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers