javascript中的insertBefore方法

DEMO1:默认添加在文档的最后
Html代码  
  1. <SCRIPT LANGUAGE="JavaScript">  
  2. window.onload=function(){  
  3.   var a =document.createElement("span");  
  4.   var b =document.createTextNode("cssrain");  
  5.   a.appendChild(b);  
  6.   document.body.appendChild(a); //默认添加在文档的最后。  
  7.   //如果我们想指定位置，那么得使用insertBefore()  
  8. }  
  9. </SCRIPT>  
  10. <body>  
  11. aaaaaaaaaaaaa  
  12. <div>ccccccc</div>  
  13. <div>bbbbbbbbb</div>  
  14. </body>  

DEMO2:insertBefore添加到指定位置

Html代码  
  1. <SCRIPT LANGUAGE="JavaScript">  
  2. window.onload=function(){  
  3. var a =document.createElement("span");  
  4. var b =document.createTextNode("cssrain");  
  5. a.appendChild(b);  
  6.      
  7.   var mubiao = document.getElementById("b");  
  8.   mubiao.parentNode.insertBefore(a,mubiao);  
  9.   //插入到div b 前面。  
  10. /*  
  11. parentElement.insertBefore( newElement , targetElement );  
  12. 从上面语法可以看出， 父元素， 新元素，目标元素 是 insertBefore使用的3要素。  
  13. 其实我们可以不管 父元素， 因为 父元素我们 可以用 目标元素.parentNode 得到。  
  14. 那么insertBefore就很好用了。只要给2个参数 ： 新元素 和目标元素。  
  15.   
  16. 那么有没有 insertAfter()方法呢？答案看下个例子。  
  17. */  
  18. }  
  19. </SCRIPT>  
  20. <body>  
  21. aaaaaaaaaaaaa  
  22. <div>ccccccc</div>  
  23. <div id="b">bbbbbbbbb</div>  
  24. </body>  

DEMO3:

Html代码  
  1. <SCRIPT LANGUAGE="JavaScript">  
  2. // DOM没有提供insertAfter()方法，所以我们只能自己写一个。  
  3. function insertAfter(newElement,targetElement) {  
  4.   var parent = targetElement.parentNode;  
  5.   if (parent.lastChild == targetElement) {  
  6. // 如果最后的节点是目标元素，则直接添加。因为默认是最后  
  7.   parent.appendChild(newElement);  
  8.   } else {  
  9.   parent.insertBefore(newElement,targetElement.nextSibling);  
  10. //如果不是，则插入在目标元素的下一个兄弟节点 的前面。也就是目标元素的后面。  
  11.   }  
  12. }  
  13.   
  14. window.onload=function(){  
  15.   var a =document.createElement("span");  
  16.   var b =document.createTextNode("cssrain");  
  17.   a.appendChild(b);  
  18.      
  19.   var mubiao = document.getElementById("b");  
  20.   insertAfter(a,mubiao);    
  21. }  
  22. </SCRIPT>  
  23. <body>  
  24. aaaaaaaaaaaaa  
  25. <div>ccccccc</div>  
  26. <div id="b">bbbbbbbbb</div>  
  27. <div>dddddd</div>  
  28. </body>  
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/sheshou/p/5202791.html