JavaScript基础之插入DOM

一个是使用appendChild，把一个子节点添加到父节点的最后一个子节点。例如：

<p id="js">Javascriptp>
<div id="list">
    <p id="java">Javap>
    <p id="python">Pythonp>
    <p id="scheme">Schemep>
div>

把

Javascript

var
    js=document.getElementId('js');
    list=document.getElementId('list');
list.appendChild(js);

现在，HTML结构变成了这样：

<div id="list">
    <p id="java">Javap>
    <p id="python">Pythonp>
    <p id="scheme">Schemep>
    <p id="js">Javascriptp>
div>

因为我们插入的js节点已经存在于当前的文档树，因此这个节点首先会从原先的位置删除，再插入到新的位置。
更多的时候我们会从零创建一个新的节点，然后插入到指定位置：

var
    list=document.getElementId('list');
    haskell=document.createElement('p');
haskell.id='haskell';
haskell.innerHTML='haskell';
list.appendChild(haskell);

这样我们就动态添加了一个新的节点：

<div id="list">
    <p id="java">Javap>
    <p id="python">Pythonp>
    <p id="scheme">Schemep>
    <p id="haskell">Haskellp>
div>

动态创建一个节点然后添加到DOM树中，可以实现很多功能。举个例子，下面的代码动态创建了一个

var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
document.getElementsByTagName('head')[0].appendChild(d);

insertBefore

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

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

<div id="list">
    <p id="java">Javap>
    <p id="python">Pythonp>
    <p id="scheme">Schemep>
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结构如下：

<div id="list">
    <p id="java">Javap>
    <p id="haskell">Haskellp>
    <p id="python">Pythonp>
    <p id="scheme">Schemep>
div>