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 相关文章推荐
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
随鼠标上下滚动的jquery代码
Dec 05 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
比较常见的javascript中定义函数的区别
Nov 09 Javascript
jQuery each函数源码分析
May 25 Javascript
jQuery实现鼠标跟随效果
Feb 20 Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
Vue组件之自定义事件的功能图解
Feb 01 Javascript
JavaScript中的E-mail 地址格式验证
Mar 28 Javascript
js类的继承定义与用法分析
Jun 21 Javascript
JavaScript提升机制Hoisting详解
Oct 23 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 session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
php中批量替换文件名的实现代码
2011/07/20 PHP
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
基于node.js实现爬虫的讲解
2019/02/18 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
python双向链表原理与实现方法详解
2019/12/03 Python
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
应届生法律顾问求职信
2013/11/19 职场文书
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
趣味运动会活动方案
2014/02/12 职场文书
期终自我鉴定
2014/02/17 职场文书
工作鉴定评语
2014/05/04 职场文书
彩妆大赛策划方案
2014/05/13 职场文书
校庆团日活动总结
2014/08/28 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书
PyCharm 安装与使用配置教程(windows,mac通用)
2021/05/12 Python