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 相关文章推荐
input 高级限制级用法
Mar 26 Javascript
JS 无法通过W3C验证的处理方法
Mar 09 Javascript
URL地址中的#符号使用说明
Feb 12 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
May 08 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
微信小程序实现tab左右切换效果
Nov 15 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 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
收集的DedeCMS一些使用经验
2007/03/17 PHP
PHP表单提交表单名称含有点号(.)则会被转化为下划线(_)
2011/12/14 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
基于PHP遍历数组的方法汇总分析
2013/06/08 PHP
浅析PHP文件下载原理
2014/12/25 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
Vue中props的详解
2019/05/16 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
js实现碰撞检测
2021/01/29 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
python简单实例训练(21~30)
2017/11/15 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
python 并发编程 非阻塞IO模型原理解析
2019/08/20 Python
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
Android面试题附答案
2014/12/08 面试题
三八妇女节寄语
2015/02/27 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server