详解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 相关文章推荐
jquery JSON的解析方式
Jul 25 Javascript
jquery 操作DOM的基本用法分享
Apr 05 Javascript
Javascript字符串对象的常用方法简明版
Jun 26 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
Vue自定义属性实例分析
Feb 23 Javascript
详解微信小程序获取当前时间及日期的方法
Apr 28 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
在Vuex中Mutations修改状态操作
Jul 24 Javascript
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
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脚本的10个技巧(7)
2006/10/09 PHP
PHP 中文处理技巧
2010/04/25 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
django中的ajax组件教程详解
2018/10/18 PHP
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
js表头排序实现方法
2015/01/16 Javascript
js带前后翻页的图片切换效果代码分享
2015/09/08 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
原生js实现查询天气小应用
2016/12/09 Javascript
js时间控件只显示年月
2017/01/08 Javascript
react-router中的属性详解
2017/06/01 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
Vue render深入开发讲解
2018/04/13 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
layui radio性别单选框赋值方法
2018/08/15 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
vue 解除鼠标的监听事件的方法
2019/11/13 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python字符串string的内置方法实例详解
2018/05/14 Python
pandas 时间格式转换的实现
2019/07/06 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
TensorFlow2.X结合OpenCV 实现手势识别功能
2020/04/08 Python
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
大学生四个方面的自我评价
2013/09/19 职场文书
会计专业毕业自荐书范文
2014/02/08 职场文书
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers