创建原生JS insertafter()方法实现 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <body>
 7     <div id="box">
 8         <span>开始</span>
 9         <p id="aaa">qqq</p>
10         <span>结束</span>
11     </div>
12 </body> 
13 </html> 

 1 <script>
 2 window.onload = function(){
 3     var box = document.getElementById("box");
 4     var aaa = document.getElementById("aaa");
 5     var p = document.createElement("p");
 6     afterinsert(p,aaa);
 7 }
 8 
 9 function afterinsert(newElement,targetElement){
10     var parent = targetElement.parentNode;　　//得到父节点
11     if (parent.lastChild === targetElement) {
12         parent.appendChild(newElement);　　如果最后一个子节点是当前元素，那么直接添加即可
13     }else{　　
14         parent.insertBefore(newElement,targetElement.nextSibling);　　//否则，当前节点的下一个节点之前添加
15     }
16 
17 }
18 
19 </script>

insertBefore()方法可以给当前元素的前面创建一个节点，但没有提供给当前元素的后面创建一个节点，所以我们可以用已有知识创建一个insertafter方法

 

posted on 2017-08-03 14:41  zz_zjy  阅读(441)  评论(0)  编辑  收藏  举报

导航