JS(JavaScript)插入节点的方法appendChild与insertBefore

首先 从定义来理解 这两个方法:

appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点。语法:appendChild(newchild)

insertBefore() 方法:可在已有的子节点前插入一个新的子节点。语法 :insertBefore(newchild,refchild)

相同之处:插入子节点

不同之处:实现原理方法不同。

     appendChild方法是在父级节点中的子节点的末尾添加新的节点(相对于父级节点 来说)。

       insertBefore 方法 是在已有的节点前添加新的节点(相对于子节点来说的)。

如果你看到这段文字,说明您正使用RSS阅读或转自《一棵树-博客园》,原文地址:http://www.cnblogs.com/atree/archive/2011/09/26/JS-appendChild-insertBefore.html

来看个这个简单的实例:在id为box-con 的末尾添加一个子节点div

< div class ="btns" >< input type ="button" value ="插入元素" id ="creatbtn" /></ div >
< div     id ="box-one" >
< p class ="con2" id ="p1" > 1 </ p >
< p class ="con2" > 2 </ p >
< p class ="con2" > 3 </ p >
</ div >

 

window.onload = function () {
var btn = document.getElementById( " creatbtn " );

btn.onclick
= function () {
insertEle();
}
}
function insertEle() {
var oTest = document.getElementById( " box-one " );
var newNode = document.createElement( " div " );

newNode.innerHTML
= " This is a newcon " ;
// oTest.appendChild(newNode);
oTeset.insertBefore(newNode, null ); // 这两种方法均可实

}

这个insertBefore 的第一个参数 和appendChild的一样,都是那个新的节点变量,而insert第二个参数不仅可以为null 。也可以这样写呢

function insertEle() {
var oTest = document.getElementById( " box-one " );
var newNode = document.createElement( " div " );
var reforeNode = document.getElementById( " p1 " );

newNode.innerHTML
= " This is a newcon " ;    
oTest.insertBefore(newNode,reforeNode); // 新建的元素节点插入到 id为p1的元素前面

}

 

或者

function insertEle() {
var oTest = document.getElementById( " box-one " );
var newNode = document.createElement( " div " );
var reforeNode = document.getElementById( " p1 " );

newNode.innerHTML
= " This is a newcon " ;
oTest.insertBefore(newNode,reforeNode.nextSibling);//新建的元素节点插入到 id为p1后面节点元素的 前面,
                              也就是说 插入id为P1节点元素的后面。

}

这里想说的是 nextSibling :某个元素之后紧跟的元素(处于同一树层级中)。

reforeNode.nextSibling :取得的是reforeNode对象的紧跟着的下一个节点。

previousSibling - 取得某节点的上一个同级节点

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值