碼上快樂

相關內容    簡體    繁體

javascript中的insertBefore方法

本文轉載自   查看原文   2016-02-20 10:18   3180    js
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>  


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 JS中插入節點的方法appendChild和insertBefore的應用 insertBefore() javascript的insertBefore、insertAfter和appendChild簡單介紹 javascript中函數和方法有什么不同 JavaScript 中的 replace 方法 javascript中的sort()方法 jQuery 文檔操作 - insertAfter() ，insertBefore()，after()，before() 方法 JavaScript中eval的替代方法 JavaScript中getBoundingClientRect()方法詳解 javascript中中文轉碼的方法
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM