zoukankan      html  css  js  c++  java

  • 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>  
  • 相关阅读:
    Java基础50道经典练习题（33）——杨辉三角
    Java基础50道经典练习题（32）——左移右移
    团队第二阶段冲刺04
    团队第二阶段冲刺03
    团队第二阶段冲刺02
    团队第二阶段冲刺01
    团队意见汇总
    各组意见汇总
    团队第一阶段冲刺07
    绩效评估01
  • 原文地址：https://www.cnblogs.com/sheshou/p/5202791.html
Copyright © 2011-2022 走看看