首页 > 代码库 > 关于insertBefore

关于insertBefore

2024-08-04 18:18:05   219人阅读

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


联系
我们