关于insertBefore

标签：des   style   blog   http   ar   color   使用   sp   for   

insertBefore，看名字就是在某个元素前插入元素，但是其实它可以再文档任何元素强势插入。

insertBefore用法：

parent.insertBefore(newChild, refChild)

即该方法必须在你希望插入到前面的父元素上调用．该方法带有两个参数．前一个是你希望插入的元素，后一个是你希望插入到该元素的前面。

我们看几个例子。

有这样的html：

    <div id="wrapper">
        <p id="a">AAAAA</p>
        <p id="b">BBBBB</p>
        <p id="c">CCCCC</p>
        <p id="d">DDDDD</p>
    </div>    

1）insertBefore第二个参数可以使null。

var newp1 = document.createElement(‘p‘);
newp1.innerHTML = ‘insertBefore，第二个参数是null‘;

wrapper.insertBefore(newp1, null) 

效果和appendChild一样。

2）通常用法

var newp3 = document.createElement(‘p‘);
newp3.innerHTML = ‘insertBefore, 插到b前面‘

wrapper.insertBefore(newp3, b) 

3）插到第一个元素之前，也就是插到最前面

var newp4 = document.createElement(‘p‘);
newp4.innerHTML = ‘insertBefore, 插入到最前面‘


wrapper.insertBefore(newp4, wrapper.firstChild)

4）插入到最后一个元素之前

var newp5 = document.createElement(‘p‘);
newp5.innerHTML = ‘insertBefore, 插入到最后元素的前面‘

wrapper.insertBefore(newp5, wrapper.lastChild)

哎。。。不对，怎么不是插到最后一个前面。。。。

我们把lastChild打印出来看一下

lastChild是个文本节点，所以其实插到最后一个前面了。。。

其实firstChild就是childNodes[0]，而lastChild就是childNodes[childNodes.length-1]

childNodes在不同浏览器下可能表现不一致，有的只包括元素节点，IE好像是这样，有的还包括文本节点，所以在使用时需要判断一下nodeType是不是3（文本节点），或者1（元素节点）。

哎。。。怎么说着说着insertBefore说到childNodes了。。。。

关于insertBefore

标签：des   style   blog   http   ar   color   使用   sp   for   

原文地址：http://www.cnblogs.com/zjzhome/p/4125908.html