详解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 相关文章推荐
event.srcElement 用法笔记e.target
Dec 18 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
JavaScript实现表格排序方法
Jun 14 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
easyui Droppable组件实现放置特效
Aug 19 Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 Javascript
[原创]微信小程序获取网络类型的方法示例
Mar 01 Javascript
vue中data里面的数据相互使用方式
Jun 05 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
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
PHP生成腾讯云COS接口需要的请求签名
2018/05/20 PHP
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
vue中activated的用法
2021/01/03 Vue.js
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
用python删除java文件头上版权信息的方法
2014/07/31 Python
python中黄金分割法实现方法
2015/05/06 Python
python爬虫基本知识
2018/03/05 Python
Django之模板层的实现代码
2019/09/09 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
浅析Python面向对象编程
2020/07/10 Python
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
酒店实习个人鉴定
2013/12/07 职场文书
学前教育毕业生自荐信范文
2013/12/24 职场文书
三年级科学教学反思
2014/01/29 职场文书
法制宣传教育方案
2014/05/09 职场文书
大学国际贸易专业自荐信
2014/06/05 职场文书
北京英文导游词
2015/02/12 职场文书
2016年记者节感言
2015/12/08 职场文书
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android