insertBefore的用法，以及注意事项，并且模仿编写insertAfter()方法
DOM提供的一个名为insertBefore()的方法，用来将一个新元素插入到现有的元素的前面。
使用这个方法的条件：
- 想插入的新元素是谁newElement，我们创建的元素
- 插入到谁的前面
- 2个元素拥有共同的父级，这是这个方法的关键，即使新元素和已经存在的元素是同级的，那么他们一定有共同的父级，最基本的父级那就是body
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script type="text/javascript"> 5 window.onload = function() { 6 var oBox = document.getElementById("box"); 7 var img = document.createElement("img"); 8 img.setAttribute("src","img/aa.jpg"); 9 img.setAttribute("alt","图片"); 10 img.setAttribute("title","大佛"); 11 /*必须有共同的父节点,即使都没有在其他盒子里面，那最起码的父节点就是body*/ 12 oBox.parentNode.insertBefore(img,oBox); 13 } 14 </script> 15 </head> 16 <body> 17 <div id="box"> 18 <p>111</p> 19 <p>222</p> 20 </div> 21 </body> 22 </html>
这里在box前面插入一个元素，那么他们的共同父级就是Body，这是毫无疑问的，因此这里必须使用parentNode这个属性
下面模仿上面的insertBefore方法，来写DOM并没有提供的insertAfter方法
1 function insertAfter(newElement,targetElement) { 2 //拿到要插入节点的父节点 3 var parent = targetElement.parentNode; 4 if(parent.lastChild == targetElement) { 5 parent.appendChild(newElement); 6 } else {
parent.insertBefore(newElement,targetElement.nextSibling); 7 } 8 }
