详解javascript appendChild()的完整功能


Posted in Javascript onAugust 18, 2018

appendChild()常用功能。

  • 平时我们用appendChild的时候,都是向父级上添加子元素
  • appendChild的另一个功能是,先把元素从原有父级上删掉,然后添加元素到新的父级。(移除再添加)。

代码说明

<!DOCTYPE html>
<html>
 <head>
  <title>appendChild的第二种功能</title>
  <script>
   window.onload=function(){
    var oUl1=document.getElementById("ul1");
    var oUl2=document.getElementById("ul2");
    var oBtn=document.getElementById("btn1");
    oBtn.onclick=function(){
     var oLi=oUl1.children[0];
     oUl1.appendChild(oLi);
    }
   }
  </script>
 </head>
 <body>
  <ul id="ul1">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
  </ul>
  <input type="button" id="btn1" value="移动">
 </body>
</html>

用appendChild的第二种功能实现一个li按照内容大小排序

<!DOCTYPE html>
<html>
 <head>
  <title>appendChild的第二种功能</title>
  <script>
   window.onload=function(){
    var oUl1=document.getElementById("ul1");
    var oBtn=document.getElementById("btn1");
    oBtn.onclick=function(){
     var aLi=oUl1.getElementsByTagName("li");
     // aLi是一个元素集合,不是真正意义的数组,不能用sort方法,转成数组再用sort排序
     var arr=[];
     for(var i=0; i<aLi.length; i++){
      arr.push(aLi[i]);
     }
     arr.sort(function(li1,li2){
      var n1=parseInt(li1.innerHTML);
      var n2=parseInt(li2.innerHTML);
      return n1-n2
     });
     for(var j=0; j<arr.length; j++){
      oUl1.appendChild(arr[j]);//当添加子元素的时候以前的元素已经被删除,所以不会出现重复元素
     }
    }
   }
  </script>
 </head>
 <body>
  <ul id="ul1">
   <li>12</li>
   <li>2</li>
   <li>30</li>
   <li>22</li>
  </ul>
  <input type="button" id="btn1" value="移动">
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(7)
Dec 23 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
Jul 31 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
Bootstrap Table快速完美搭建后台管理系统
Sep 20 Javascript
javascript填充默认头像方法
Feb 22 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
ES6 中可以提升幸福度的小功能
Aug 06 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 Javascript
vue中的自定义分页插件组件的示例
Aug 18 #Javascript
vue 自定义提示框(Toast)组件的实现代码
Aug 17 #Javascript
微信小程序实现即时通信聊天功能的实例代码
Aug 17 #Javascript
在iFrame子页面里实现模态框的方法
Aug 17 #Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 #Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 #Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 #Javascript
You might like
PHP脚本数据库功能详解(下)
2006/10/09 PHP
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
php创建类并调用的实例方法
2019/09/25 PHP
JavaScript面向对象编程
2008/03/02 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
2015/01/08 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
node后端服务保活的实现
2019/11/10 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
[52:39]完美世界DOTA2联赛PWL S3 CPG vs Forest 第一场 12.16
2020/12/17 DOTA
python判断设备是否联网的方法
2018/06/29 Python
Python requests库用法实例详解
2018/08/14 Python
python+tkinter实现学生管理系统
2019/08/20 Python
python函数不定长参数使用方法解析
2019/12/14 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
美国Curacao百货连锁店网站:iCuracao.com
2019/07/20 全球购物
Maxpeedingrods美国:高性能汽车零件
2020/02/14 全球购物
竞争性谈判邀请书
2014/02/06 职场文书
幸福家庭标语
2014/06/27 职场文书
幼师自荐信范文
2015/03/06 职场文书
2015年感恩母亲节活动方案
2015/05/04 职场文书
南京大屠杀观后感
2015/06/02 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书