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面向对象之静态与非静态类
Feb 03 Javascript
node.js操作mongodb学习小结
Apr 25 Javascript
解析JavaScript的ES6版本中的解构赋值
Jul 28 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
BootStrap 模态框实现刷新网页并关闭功能
Jan 04 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
May 02 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
JavaScript复制内容到剪贴板的两种常用方法
Feb 27 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 Javascript
vue实现登录拦截
Jun 29 Javascript
JS封装cavans多种滤镜组件
Feb 15 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
Terran热键控制
2020/03/14 星际争霸
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
PHP开发中四种查询返回结果分析
2011/01/02 PHP
PHP中time(),date(),mktime()区别介绍
2013/09/28 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
2020/02/10 PHP
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
jQuery中andSelf()方法用法实例
2015/01/08 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
JavaScript ES 模块的使用
2020/11/12 Javascript
python处理cookie详解
2014/02/07 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
在Python中分别打印列表中的每一个元素方法
2018/11/07 Python
详解python运行三种方式
2019/05/13 Python
pycharm的python_stubs问题
2020/04/08 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
巴西男士个人护理产品商店:SHOP4MEN
2017/08/07 全球购物
华为慧通面试题
2012/09/11 面试题
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
老公给老婆的保证书
2014/04/28 职场文书
公司口号大全
2014/06/11 职场文书
幼儿生日活动方案
2014/08/27 职场文书
2016年元旦致辞
2015/08/01 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python