优雅地插入dom节点

更改DOM结构，插入dom节点，是每个前端都会接触到的。

部分代码来源于网络

节点插入

如果你创建的dom比较少，或者是对已存在的节点进行移动修改。你可以使用以下方式

appendChild/insertBefore

该方法向其子节点列表的尾部插入新节点：

1. 已存在节点

<p id="js">JavaScript</p>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

将<p id="js">JavaScript</p>插入到div下：

var js = document.getElementById('js'),
var list = document.getElementById('list');
list.appendChild(js);

DOM结构变成：

<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="js">JavaScript</p>
</div>

2. 新的元素节点

var list = document.getElementById('list'),
var haskell = document.createElement('p');//创建新元素
haskell.id = 'haskell';//设置新节点的id
haskell.innerText = 'Haskell';//设置新节点的文本节点
list.appendChild(haskell);//插入

新的dom结构：

<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="haskell">Haskell</p>
</div>

insertBefore的用法基本和appendChild相同，是在子节点的首部添加。

innerHTML

这是一个强大的属性，但是也是一个危险的属性，React 设置了长长的属性名称dangerouslysetinnerhtml来阻止你使用，甚至加上了dangerous的危险字眼。

设置节点的文本内容

<p id="test"></p>

document.getElementById('test').innerHTML="hello world"

p节点的文本内容就成了：

<p id="test">hello world</p>

插入HTML字符串

拿上面的例子，插入一段HTML

var html = `<span>hello world</span>`
document.getElementById('test').innerHTML=html

此时的dom结构将变成：

<p id="test">
    <span>hello world</span>
</p>

批量插入不规则的html非常有用。

插入DOM

删除一个DOM节点就比插入要容易得多。
要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉：

// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true

注意到删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置。
当你遍历一个父节点的子节点并进行删除操作时，要注意，children属性是一个只读属性，并且它在子节点变化时会实时更新。