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方法