详解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 相关文章推荐
js 与或运算符 || &amp;&amp; 妙用
Dec 09 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
js函数的引用, 关于内存的开销
Sep 17 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
Dec 18 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
jQuery中库的引用方法
Jan 06 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
在vscode中统一vue编码风格的方法
Feb 22 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
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可逆加密函数(分享)
2013/06/06 PHP
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
[52:08]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第一局
2016/03/05 DOTA
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
python网络编程学习笔记(四):域名系统
2014/06/09 Python
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
谈谈python中GUI的选择
2018/03/01 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
Python中的类与类型示例详解
2019/07/10 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
一文详述 Python 中的 property 语法
2020/09/01 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
Waterford英国官方网站:世界上最受欢迎的优质水晶品牌
2019/08/17 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
优秀技术工人先进材料
2014/02/17 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
三八活动策划方案
2014/08/17 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
群众路线党员自我评议范文2014
2014/09/24 职场文书
十八大宣传标语
2014/10/09 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书