详解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 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
document.designMode的功能与使用方法介绍
Nov 22 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
artDialog+plupload实现多文件上传
Jul 19 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
JS异步堆栈追踪之为什么await胜过Promise
Apr 28 Javascript
关于JavaScript 中 if包含逗号表达式
Nov 27 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
对Session和Cookie的区分与解释
2007/03/16 PHP
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
php中的常用魔术方法总结
2013/08/02 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
php微信开发之批量生成带参数的二维码
2016/06/26 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
vue 中自定义指令改变data中的值
2017/06/02 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
python选择排序算法实例总结
2015/07/01 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
医学院四年学习生活的自我评价
2013/11/06 职场文书
中学家长会邀请函
2014/01/17 职场文书
2014年大学生自我评价
2014/01/19 职场文书
高中生期末评语
2014/01/28 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python