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 相关文章推荐
JS定时刷新页面及跳转页面的方法
Jul 04 Javascript
jquery实现metro效果示例代码
Sep 06 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 Javascript
JavaScript中的正则表达式简明总结
Apr 04 Javascript
嵌入式iframe子页面与父页面js通信的方法
Jan 20 Javascript
纯JS代码实现隔行变色鼠标移入高亮
Nov 23 Javascript
AngularJS 表单验证手机号的实例(非必填)
Nov 12 Javascript
微信小程序使用npm支持踩坑
Nov 07 Javascript
深入理解 JS 垃圾回收
Jun 03 Javascript
微信小程序实现选择地址省市区三级联动
Jun 21 Javascript
Element Dialog对话框的使用示例
Jul 26 Javascript
vue使用Sass时报错问题的解决方法
Oct 14 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
德生PL990的分析评价
2021/03/02 无线电
在PHP中使用XML
2006/10/09 PHP
php代码运行时间查看类代码分享
2011/08/06 PHP
PHP使用递归生成文章树
2015/04/21 PHP
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
js location.replace与location.reload的区别
2010/09/08 Javascript
判断文件是否正在被使用的JS代码
2013/12/21 Javascript
Js实现网页键盘控制翻页的方法
2014/10/30 Javascript
一个检测表单数据的JavaScript实例
2014/10/31 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
简单的js计算器实现
2016/10/26 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
python树莓派红外反射传感器
2019/01/21 Python
python实现邮件发送功能
2019/08/10 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
Python 3 使用Pillow生成漂亮的分形树图片
2019/12/24 Python
python使用建议与技巧分享(一)
2020/08/17 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
美国顶级奢侈茶:Mighty Leaf Tea(美泰茶)
2016/11/26 全球购物
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
公司年会策划方案
2014/05/17 职场文书
工伤事故证明
2014/10/20 职场文书
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers