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.lazyload.js实现页面延迟载入
Dec 22 Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 Javascript
jQuery Ajax中的事件详细介绍
Apr 16 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
详解javascript中的事件处理
Nov 06 Javascript
基于JavaScript短信验证码如何实现
Jan 24 Javascript
javascript弹出带文字信息的提示框效果
Jul 19 Javascript
jquery——九宫格大转盘抽奖实例
Jan 16 Javascript
vue2.0移除或更改的一些东西(移除index key)
Aug 28 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
如何制作一个Node命令行图像识别工具
Dec 12 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
May 24 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
PHP迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
JavaScript事件列表解说
2006/12/22 Javascript
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
vue axios重复点击取消上一次请求封装的方法
2019/06/19 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
python实现得到一个给定类的虚函数
2014/09/28 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
python通过链接抓取网站详解
2019/11/20 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
如何保障Web服务器安全
2014/05/05 面试题
Linux机考试题
2015/07/17 面试题
易程科技软件测试笔试
2013/03/24 面试题
女大学生毕业找工作的自我评价
2013/10/03 职场文书
写给女生的道歉信
2014/01/08 职场文书
高中生期末评语
2014/01/28 职场文书
倡议书格式
2014/04/14 职场文书
合作与交流自我评价
2015/03/09 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js