详解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动画4.升级版遮罩效果的图片走廊--带自动运行效果
Aug 24 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
JavaScript的各种常见函数定义方法
Sep 16 Javascript
js脚本分页代码分享(7种样式)
Aug 19 Javascript
JavaScript实现点击单元格改变背景色的方法
Feb 12 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
Aug 16 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
Vue入门之数据绑定(小结)
Jan 08 Javascript
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 Javascript
jquery实现点击弹出对话框
Feb 08 jQuery
vue项目接口域名动态获取操作
Aug 13 Javascript
JavaScript执行机制详细介绍
Dec 06 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录入页面中动态从数据库中提取数据的实现
2006/10/09 PHP
WordPress中设置Post Type自定义文章类型的实例教程
2016/05/10 PHP
自制轻量级仿jQuery.boxy对话框插件代码
2010/10/26 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
JavaScript中的console.log()函数详细介绍
2014/12/29 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
VUE中的无限循环代码解析
2017/09/22 Javascript
vuejs前后端数据交互之从后端请求数据的实例
2018/08/11 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
python三元运算符实现方法
2013/12/17 Python
Python实现Logger打印功能的方法详解
2017/09/01 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
python使用re模块爬取豆瓣Top250电影
2020/10/20 Python
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
一些关于MySql加速和优化的面试题
2014/01/30 面试题
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
医学生职业规划范文
2014/01/05 职场文书
工作推荐信范文
2014/05/10 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
土地租赁协议书
2015/01/29 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis