插入DOM

当我们获得了某个DOM节点，想在这个DOM节点内插入新的DOM，应该如何做？

如果这个DOM节点是空的，例如， <div></div> ，那么，直接使用 innerHTML = '<span>child</span>' 就可以修改DOM节点的内容，相当于“插入”了新的DOM节点。

如果这个DOM节点不是空的，那就不能这么做，因为 innerHTML 会直接替换掉原来的所有子节点。

有两个办法可以插入新的节点。一个是使用 appendChild ，把一个子节点添加到父节点的最后一个子节点。例如：

<!— HTML结构 —>

<p id="js">JavaScript</p>

<div id="list">

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

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

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

</div>

把 &lt;p id="js"&gt;JavaScript&lt;/p&gt; 添加到 &lt;div id="list"&gt; 的最后一项：

var

js = document.getElementById('js'),

list = document.getElementById('list');

list.appendChild(js);

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

<!— HTML结构 —>

<div id="list">

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

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

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

<p id="js">JavaScript</p>

</div>

因为我们插入的 js 节点已经存在于当前的文档树，因此这个节点首先会从原先的位置删除，再插入到新的位置。

更多的时候我们会从零创建一个新的节点，然后插入到指定位置：

var

list = document.getElementById('list'),

haskell = document.createElement('p');

haskell.id = 'haskell';

haskell.innerText = 'Haskell';

list.appendChild(haskell);

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

<!— HTML结构 —>

<div id="list">

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

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

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

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

</div>

动态创建一个节点然后添加到DOM树中，可以实现很多功能。举个例子，下面的代码动态创建了一个 &lt;style&gt; 节点，然后把它添加到 &lt;head&gt; 节点的末尾，这样就动态地给文档添加了新的CSS定义：

var d = document.createElement('style');

d.setAttribute('type', 'text/css');

d.innerHTML = 'p { color: red }';

document.getElementsByTagName('head')[0].appendChild(d);

可以在Chrome的控制台执行上述代码，观察页面样式的变化。