初学js插入节点appendChild insertBefore使用方法

由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点但是两种情况结合起来发现insertBefore()方法插入节点,是可以在子节点列表的任意位置。
首先 从定义来理解 这两个方法: 
appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点。语法:appendChild(newchild) 
insertBefore() 方法:可在已有的子节点前插入一个新的子节点。语法 :insertBefore(newchild,refchild) 
相同之处:插入子节点 
不同之处:实现原理方法不同。 
     appendChild方法是在父级节点中的子节点的末尾添加新的节点(相对于父级节点 来说)。 
     insertBefore 方法 是在已有的节点前添加新的节点(相对于子节点来说的)。 
来看个这个简单的实例:在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()方法插入节点,是可以在子节点列表的任意位置。 

呵呵呵。。。有些方法不只是作用于定义的那些特性,只要 符合语法,结合一些属性总会有意想不到的收获。 

作为初学者,我懂的不多,或许我的理解还很浅薄,有些可能理解错了,希望看到的能够给我提点下,我不求别的,我只希望在这里记录点点滴滴和吸取大家的建议 来促进我的成长。。。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值