详解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 新浪背投广告实现代码
Jul 07 Javascript
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
js拼接html注意问题示例探讨
Jul 14 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 Javascript
Node.js的Web模板引擎ejs的入门使用教程
Jun 06 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
vue仿淘宝订单状态的tab切换效果
Jun 23 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 Javascript
Vue中qs插件的使用详解
Feb 07 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 24 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 获取全局变量的代码
2011/04/21 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
PHP可变变量学习小结
2015/11/29 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
2018/02/23 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
3个CCIE对一个工程师的面试题
2012/05/06 面试题
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
创伤外科专业推荐信范文
2013/11/19 职场文书
师范毕业生自我鉴定
2014/01/15 职场文书
毕业晚会主持词
2014/03/24 职场文书
2014年建筑工程工作总结
2014/12/03 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
2015年营业员工作总结
2015/04/23 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
mysql下的max_allowed_packet参数设置详解
2022/02/12 MySQL
Vue全局事件总线你了解吗
2022/02/24 Vue.js
python 判断文件或文件夹是否存在
2022/03/18 Python