insertBefore

如果我们要把子节点插入到指定的位置怎么办？可以使用 parentElement.insertBefore(newElement, referenceElement); ，子节点会插入到 referenceElement 之前。

还是以上面的HTML为例，假定我们要把 Haskell 插入到 Python 之前：

<!— HTML结构 —>

<div id="list">

<p id="java">Java</p>

<p id="python">Python</p>

<p id="scheme">Scheme</p>

</div>

可以这么写：

var

list = document.getElementById('list'),

ref = document.getElementById('python'),

haskell = document.createElement('p');

haskell.id = 'haskell';

haskell.innerText = 'Haskell';

list.insertBefore(haskell, ref);

新的HTML结构如下：

<!— HTML结构 —>

<div id="list">

<p id="java">Java</p>

<p id="haskell">Haskell</p>

<p id="python">Python</p>

<p id="scheme">Scheme</p>

</div>

可见，使用 insertBefore 重点是要拿到一个“参考子节点”的引用。很多时候，需要循环一个父节点的所有子节点，可以通过迭代 children 属性实现：

var

i, c,

list = document.getElementById('list');

for (i = 0; i < list.children.length; i++) {

c = list.children[i]; // 拿到第i个子节点

}