js之insertBefore(newElement,oldElement)

insertBefore的用法，以及注意事项，并且模仿编写insertAfter()方法

DOM提供的一个名为insertBefore()的方法，用来将一个新元素插入到现有的元素的前面。

使用这个方法的条件：

想插入的新元素是谁newElement，我们创建的元素
插入到谁的前面

2个元素拥有共同的父级，这是这个方法的关键，即使新元素和已经存在的元素是同级的，那么他们一定有共同的父级，最基本的父级那就是body

 <!DOCTYPE html>

 <html>

 <head>

     <script type="text/javascript">

     window.onload = function() {

     var oBox = document.getElementById("box");

     var img = document.createElement("img");

     img.setAttribute("src","img/aa.jpg");

     img.setAttribute("alt","图片");

     img.setAttribute("title","大佛");

     /*必须有共同的父节点,即使都没有在其他盒子里面，那最起码的父节点就是body*/

     oBox.parentNode.insertBefore(img,oBox);

     }

 </script>

 </head>

 <body>

     <div id="box">

     <p>111</p>

     <p>222</p>

     </div>

 </body>

 </html>

这里在box前面插入一个元素，那么他们的共同父级就是Body，这是毫无疑问的，因此这里必须使用parentNode这个属性

下面模仿上面的insertBefore方法，来写DOM并没有提供的insertAfter方法

 function insertAfter(newElement,targetElement) {

     //拿到要插入节点的父节点

     var parent = targetElement.parentNode;

     if(parent.lastChild == targetElement) {

         parent.appendChild(newElement);

     } else {
          parent.insertBefore(newElement,targetElement.nextSibling);

     }

 }

巴特西

js之insertBefore(newElement,oldElement)

insertBefore的用法，以及注意事项，并且模仿编写insertAfter()方法

最新文章

热门文章