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 面向对象全新理练之继承与多态
Dec 03 Javascript
js 获取input点选按钮的值的方法
Apr 14 Javascript
Javascript添加监听与删除监听用法详解
Dec 19 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
简单实现bootstrap选项卡效果
Feb 08 Javascript
JS实现移动端实时监听输入框变化的实例代码
Apr 12 Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 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
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
动态样式类封装JS代码
2009/09/02 Javascript
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
webpack入门+react环境配置
2017/02/08 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
javascript实现日历效果
2019/06/17 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
[54:54]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
利用nohup来开启python文件的方法
2019/01/14 Python
Python udp网络程序实现发送、接收数据功能示例
2019/12/09 Python
Python基于Tkinter编写crc校验工具
2020/05/06 Python
django在开发中取消外键约束的实现
2020/05/20 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
2014/04/02 HTML / CSS
聚网科技C++面试笔试题
2015/09/01 面试题
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
销售人员获奖感言
2014/02/05 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
Spark SQL 2.4.8 操作 Dataframe的两种方式
2021/10/16 SQL Server
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS