js AppendChild与insertBefore用法详细对比


Posted in Javascript onDecember 16, 2013

我们知道appendChild和insertBefore都有插入节点的功能。但在应用上,这两者之间还是有一些区别的。

比如我们要在下面这个div中插入一个子节点P时:

<div id="test"><p id="x1">Node</p><p>Node</p></div>

我们可以这样写(测试某种情况时请将另外一种注释):

<script type="text/javascript"> 
var oTest = document.getElementById("test"); 
var newNode = document.createElement("p"); 
newNode.innerHTML = "This is a test"; 
//测试从这里开始 
//appendChild方法: 
oTest.appendChild(newNode); 
//insertBefore方法: 
oTest.insertBefore(newNode,null); 
</script>

通过以上的代码,可以测试到一个新的节点被创建到了节点div下,且该节点是div最后一个节点。(如要查看DOM,IE可以通过IE Developer Toolbar插件来查看,Firefox可以使用Firebug)

很明显,通过这个例子,可以知道appendChildhild和insertBefore都可以进行插入节点的操作。

在上面的例子中有这样一句代码:oTest.insertBefore(newNode,null) ,这里insertBefore有2个参数可以设置,第一个是和appendChild相同的,第二却是它特有的。它不仅可以为null,还可以为:

<script type="text/javascript"> 
var oTest = document.getElementById("test"); 
var refChild = document.getElementById("x1"); 
var newNode = document.createElement("p"); 
newNode.innerHTML = "This is a test"; 
oTest.insertBefore(newNode,refChild); 
</script>

这个例子将在x1节点前面插入一个新的节点

又或:

<script type="text/javascript"> 
var oTest = document.getElementById("test"); 
var refChild = document.getElementById("x1"); 
var newNode = document.createElement("p"); 
newNode.innerHTML = "This is a test"; 
oTest.insertBefore(newNode,refChild.nextSibling); 
</script>

这个例子将在x1节点的下一个节点前面插入一个新的节点

还可为:

<script type="text/javascript"> 
var oTest = document.getElementById("test"); 
var newNode = document.createElement("p"); 
newNode.innerHTML = "This is a test"; 
oTest.insertBefore(newNode,oTest.childNodes[0]);  
</script>

这个例子将在第一子节点前面插入一个新的节点,也可以通过改变childNodes[0,1,...]来在其它位置插入新的节点

由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点,但例一中使用insertBefore()方法也可以在子节点列表末插入新节点的。两种情况结合起来,发现insertBefore()方法插入节点,是可以在子节点列表的任意位置。

从这几个例子中得出:
appendChild() 方法在节点的子节点列表末添加新的子节点。
insertBefore() 方法在节点的子节点列表任意位置插入新的节点。

Javascript 相关文章推荐
读jQuery之二(两种扩展)
Jun 11 Javascript
简单的js表单验证函数
Oct 28 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
浅谈JavaScript 标准对象
Jun 02 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 Javascript
vue+axios+promise实际开发用法详解
Oct 15 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
利用es6 new.target来对模拟抽象类的方法
May 10 Javascript
Node.js 多进程处理CPU密集任务的实现
May 26 Javascript
js中AppendChild与insertBefore的用法详细解析
Dec 16 #Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 #Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
Dec 16 #Javascript
JS冒泡事件的快速解决方法
Dec 16 #Javascript
JS批量操作CSS属性详细解析
Dec 16 #Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 #Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 #Javascript
You might like
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
深入php多态的实现详解
2013/06/09 PHP
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
jQuery 注意事项 与原因分析
2009/04/24 Javascript
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
2013/09/10 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
Vue.js中extend选项和delimiters选项的比较
2017/07/17 Javascript
React diff算法的实现示例
2018/04/20 Javascript
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
python实现定时同步本机与北京时间的方法
2015/03/24 Python
python在指定目录下查找gif文件的方法
2015/05/04 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
python实现文本界面网络聊天室
2018/12/12 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
管理科学大学生求职信
2013/11/13 职场文书
旷课检讨书大全
2014/01/21 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
Python+uiautomator2实现自动刷抖音视频功能
2021/04/29 Python
django中websocket的具体使用
2022/01/22 Python