javascript中的insertBefore方法

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添加到指定位置

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

DEMO3:

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. window.onload=function(){
14. var a =document.createElement("span");
15. var b =document.createTextNode("cssrain");
16. a.appendChild(b);
17. var mubiao = document.getElementById("b");
18. insertAfter(a,mubiao);
19. }
20. </SCRIPT>
21. <body>
22. aaaaaaaaaaaaa
23. <div>ccccccc</div>
24. <div id="b">bbbbbbbbb</div>
25. <div>dddddd</div>
26. </body>