js：插入节点appendChild insertBefore使用方法

首先 从定义来理解 这两个方法： 
appendChild() 方法：可向节点的子节点列表的末尾添加新的子节点。语法：appendChild(newchild) 
insertBefore() 方法：可在已有的子节点前插入一个新的子节点。语法 ：insertBefore(newchild,refchild) 
相同之处：插入子节点 
不同之处：实现原理方法不同。 
　　　　 appendChild 方法是在父级节点中的子节点的末尾添加新的节点（相对于父级节点来说）。 
　　　　 insertBefore  方法是在已有的节点前添加新的节点（相对于子节点来说的）。

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

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

 1 window.onload = function () {
 2 　　var btn = document.getElementById("creatbtn");
 3 　　btn.onclick = function() {
 4 　　　　insertEle();
 5　　 }
 6 }
 7 function insertEle() {
 8 　　var oTest = document.getElementById("box-one");
 9 　　var newNode = document.createElement("div"); // createElement 是在对象中创建一个对象
10 　　newNode.innerHTML = " This is a newcon ";
11 　　//oTest.appendChild(newNode);
12 　　oTeset.insertBefore(newNode,null); // 这两种方法均可实现 或者oTeset.insertBefore(newNode,oTeset.childNodes[0])　　　　
13 } 

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

1 function insertEle() {
2 　　var oTest = document.getElementById("box-one");
3 　　var newNode = document.createElement("div");
4 　　var reforeNode = document.getElementById("p1");
5 　　newNode.innerHTML = " This is a newcon ";
6 　　oTest.insertBefore(newNode,reforeNode); // 新建的元素节点插入到 id为p1的元素前面 //或者oTest.insertBefore(newNode,reforeNode.nextSibling);//新建的元素节点插入到 id为p1后面节点元素的前面，也就是说 插入id为P1节点元素的后面。 7} 

nextSibling :某个元素之后紧跟的元素（处于同一树层级中）。

reforeNode.nextSibling ：取得的是reforeNode对象的紧跟着的下一个节点。 
previousSibling - 取得某节点的上一个同级节点。

//appendChild无法设置想要插入的明确位置
//oTest.appendChild(oP2);

//insertBefore则可以设置
//oTest.insertBefore(oP2,null);
//oTest.insertBefore(oP2,oP1);
//oTest.insertBefore(oP2,oP1.nextSibling);
//oTest.insertBefore(oP2,oP3.previousSibling);
//oTest.insertBefore(oP2,oTest.childNodes[0]);

好了那么有insertBefore的应该也有insertAfter吧？ 
好那我们来用Aptana编写一个例子吧，但Aptana的智能提示告诉我其实没有insertAfter这个方法 
那么就自己定义一个罗
insertAfter定义

1 function insertAfter(newEl, targetEl) {
2     var parentEl = targetEl.parentNode;
3     if(parentEl.lastChild == targetEl) {
4         parentEl.appendChild(newEl);
5     }else {
6         parentEl.insertBefore(newEl,targetEl.nextSibling);
7     }
8 }     

总结： 
1、appendChild和insertBefore是做对节点的方法来使用的，而insertAfter只是自定义的一个函数 
2、insertBefore相对于appendChild来说，比较灵活可以将新的节点插入到目标节点子节点数组中的任一位置。 
3、使用appendChild和insertBefore来插入新的节点前提是，其兄弟节点必须有共同的父节点

如果只从DOM操作的性能上分析，appendChild和insertBefore这两个方法本身是没有太大差异的。但是insertBefore本身具有appendChild无法比拟的功能，它对插入元素的位置是可以选择的。因此它对页面可能造成的影响也更大，渲染的开销也可能更大。

最后顺便说一下，在IE6上，文档加载完毕之前使用appendChild会出错，而使用insertBefore就不会出错。