如何操作DOM之“新增”节点

上一篇文章，我们写了如何“查找”DOM节点，这里是时光机如何操作DOM树？——“查询”和如何操作 DOM 之“查找”。这里，我们来说一说如何往DOM树中“新增”一个节点。

要想新增一个节点的话，我们首先要来创建一个节点。首先，我们来看看DOM节点总共分几种：

我们可以看到，在 DOM-3 中总共定义了12种节点类型，当然我们不用担心，把不适合HTML文档（在这里我们只专注于HTML）以及不常用到的节点除去后，就只有下面几个（红框内）。

createAttribute(name) 创建属性名称为 name 的“属性节点”。

createComment(data) 创建内容为 data 的"注释节点"。

createElement(tagName) 创建元素名称为 tagName 的"元素节点"。

createDocumentFragment() 创建一个空的"文档片段节点"。

createTextNode(data) 创建内容为 data 的"文本节点"

下面是应用以上接口方法的一个测试案例：

测试结果如下：

欢迎关注，我们在编程的路上，共同成长！