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面向对象扩展库代码分享
Mar 27 Javascript
angularJS 中input示例分享
Feb 09 Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 Javascript
微信小程序 LOL 英雄介绍开发实例
Sep 30 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
一道面试题引发的对javascript类型转换的思考
Mar 06 Javascript
JS自动生成动态HTML验证码页面
Jun 14 Javascript
vue权限问题的完美解决方案
May 08 Javascript
原生JS实现九宫格抽奖
Sep 13 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 Javascript
vue项目实现分页效果
Mar 24 Vue.js
浅谈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
全文搜索和替换
2006/10/09 PHP
php删除指定目录的方法
2015/04/03 PHP
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
2013/04/23 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
2016/06/03 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
Python3实现连接SQLite数据库的方法
2014/08/23 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
校园招聘策划书
2014/01/09 职场文书
战友聚会主持词
2014/04/02 职场文书
酒店开业策划方案
2014/06/02 职场文书
教师演讲稿开场白
2014/08/25 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
药品开票员岗位职责
2015/04/15 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS