js：插⼊节点appendChildinsertBefore使⽤⽅法
⾸先 从定义来理解 这两个⽅法：
appendChild() ⽅法：可向节点的⼦节点列表的末尾添加新的⼦节点。语法：appendChild(newchild) insertBefore() ⽅法：可在已有的⼦节点前插⼊⼀个新的⼦节点。语法 ：insertBefore(newchild,refchild) 相同之处：插⼊⼦节点
不同之处：实现原理⽅法不同。
appendChild ⽅法是在⽗级节点中的⼦节点的末尾添加新的节点（相对于⽗级节点来说）。 insertBefore ⽅法是在已有的节点前添加新的节点（相对于⼦节点来说的）。
来看个这个简单的实例：在id为box-one 的末尾添加⼀个⼦节点div
1
2
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就不会出错。