javascript中的insertBefore方法
DEMO1:默认添加在文档的最后
Html代码
- <SCRIPT LANGUAGE="JavaScript">
- window.onload=function(){
- var a =document.createElement("span");
- var b =document.createTextNode("cssrain");
- a.appendChild(b);
- document.body.appendChild(a); //默认添加在文档的最后。
- //如果我们想指定位置，那么得使用insertBefore()
- }
- </SCRIPT>
- <body>
- aaaaaaaaaaaaa
- <div>ccccccc</div>
- <div>bbbbbbbbb</div>
- </body>
DEMO2:insertBefore添加到指定位置
Html代码
- <SCRIPT LANGUAGE="JavaScript">
- window.onload=function(){
- var a =document.createElement("span");
- var b =document.createTextNode("cssrain");
- a.appendChild(b);
- var mubiao = document.getElementById("b");
- mubiao.parentNode.insertBefore(a,mubiao);
- //插入到div b 前面。
- /*
- parentElement.insertBefore( newElement , targetElement );
- 从上面语法可以看出， 父元素， 新元素，目标元素 是 insertBefore使用的3要素。
- 其实我们可以不管 父元素， 因为 父元素我们 可以用 目标元素.parentNode 得到。
- 那么insertBefore就很好用了。只要给2个参数 ： 新元素 和目标元素。
- 那么有没有 insertAfter()方法呢？答案看下个例子。
- */
- }
- </SCRIPT>
- <body>
- aaaaaaaaaaaaa
- <div>ccccccc</div>
- <div >bbbbbbbbb</div>
- </body>
DEMO3:
Html代码
- <SCRIPT LANGUAGE="JavaScript">
- // DOM没有提供insertAfter()方法，所以我们只能自己写一个。
- function insertAfter(newElement,targetElement) {
- var parent = targetElement.parentNode;
- if (parent.lastChild == targetElement) {
- // 如果最后的节点是目标元素，则直接添加。因为默认是最后
- parent.appendChild(newElement);
- } else {
- parent.insertBefore(newElement,targetElement.nextSibling);
- //如果不是，则插入在目标元素的下一个兄弟节点 的前面。也就是目标元素的后面。
- }
- }
- window.onload=function(){
- var a =document.createElement("span");
- var b =document.createTextNode("cssrain");
- a.appendChild(b);
- var mubiao = document.getElementById("b");
- insertAfter(a,mubiao);
- }
- </SCRIPT>
- <body>
- aaaaaaaaaaaaa
- <div>ccccccc</div>
- <div >bbbbbbbbb</div>
- <div>dddddd</div>
- </body>