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 load Page,load css,load js实现代码
Mar 31 Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
javascript 常见功能汇总
Jun 11 Javascript
移动端JQ插件hammer使用详解
Jul 03 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
JavaScript构造函数详解
Dec 27 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
基于ES6作用域和解构赋值详解
Nov 03 Javascript
微信小程序实现跳转的几种方式总结(推荐)
Apr 24 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
全国FM电台频率大全 - 12 安徽省
2020/03/11 无线电
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
JS实现来回出现文字的状态栏特效代码
2015/10/31 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
JS轮播图的实现方法
2020/08/24 Javascript
Python实用日期时间处理方法汇总
2015/05/09 Python
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
python中有帮助函数吗
2020/06/19 Python
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
俄罗斯名牌服装网上商店:UNIQUE FABRIC
2019/07/25 全球购物
微笑服务标语
2014/06/24 职场文书
文言文辞职信
2015/02/28 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书
利用python做表格数据处理
2021/04/13 Python
关于vue中如何监听数组变化
2021/04/28 Vue.js
Python使用Kubernetes API访问集群
2021/05/30 Python
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL
win10此电脑打不开怎么办 win10双击此电脑无响应的解决办法
2022/07/23 数码科技