JavaScript操作insertBefore和appendChild

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

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

insertAfter

var header1 = document.getElementById("header");

var p = document.createElement("p"); // 创建一个元素节点

insertAfter(p,header1); // 因为js没有直接追加到指定元素后面的方法 所以要自己创建一个方法

function insertAfter( newElement, targetElement ){ // newElement是要追加的元素 targetElement 是指定元素的位置

var parent = targetElement.parentNode; // 找到指定元素的父节点

if( parent.lastChild == targetElement ){ // 判断指定元素的是否是节点中的最后一个位置 如果是的话就直接使用 appendChild方法

parent.appendChild( newElement, targetElement );

}else{

parent.insertBefore( newElement, targetElement.nextSibling );

};

};