js之insertBefore(newElement,oldElement)

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 }