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定时器(执行一次、重复执行)
Mar 07 Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
JavaScript字符串对象
Jan 14 Javascript
JavaScript提高加载和执行效率的方法
Feb 03 Javascript
JS中关于正则的巧妙操作
Aug 31 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
js调用设备摄像头的方法
Jul 19 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
vue 解决computed修改data数据的问题
Nov 06 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程序的国际化实现方法(利用gettext)
2011/08/14 PHP
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
javascript 闭包
2011/09/15 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
微信小程序开发摇一摇功能
2019/11/22 Javascript
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
Python使用random和tertools模块解一些经典概率问题
2015/01/28 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
利用python对Excel中的特定数据提取并写入新表的方法
2018/06/14 Python
Python 查找list中的某个元素的所有的下标方法
2018/06/27 Python
Python3 列表,数组,矩阵的相互转换的方法示例
2019/08/05 Python
使用pytorch实现论文中的unet网络
2020/06/24 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
关于EntityWrapper的in用法
2022/03/22 Java/Android