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 相关文章推荐
Mootools 1.2教程 滑动效果(Slide)
Sep 15 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
Aug 07 Javascript
ECMAScript 5中的属性描述符详解
Mar 02 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
Nov 18 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 Javascript
深入理解选择框脚本[推荐]
Dec 13 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
vue-cli 如何打包上线的方法示例
May 08 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
vue登录以及权限验证相关的实现
Oct 25 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 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中 ob_start等函数截取标准输出的方法
2015/06/22 PHP
Yii Framework框架开发微信公众平台示例
2020/04/26 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
Javascript将string类型转换int类型
2010/12/09 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
2017/07/05 jQuery
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
详解vue静态资源打包中的坑与解决方案
2018/02/05 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
layui 解决form表单点击无反应的问题
2019/10/25 Javascript
python求素数示例分享
2014/02/16 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
Python实现SMTP邮件发送
2020/06/16 Python
用python实现学生管理系统
2020/07/24 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
Linux Interview Questions For software testers
2013/05/17 面试题
应届生财务会计求职信
2013/11/05 职场文书
经销商会议欢迎词
2014/01/11 职场文书
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
团日活动策划书
2014/02/01 职场文书
财经学院自荐信范文
2014/02/02 职场文书
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
学校领导班子对照检查材料
2014/08/28 职场文书
大一新生期末自我评价
2014/09/12 职场文书
GPU服务器的多用户配置方法
2022/07/07 Servers