JS(JavaScript)插入节点的方法appendChild与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()方法插入节点，是可以在子节点列表的任意位置。