[快速入门前端 63] JavaScript：DOM (5) 节点的 CRUD - 新增节点

範例 - 如何新增节点

在前几篇文章中我们都在介绍属性的新增修改，但若我们想使用 JavaScript 动态新增元素到页面上某处的话，除了使用 innerHTML 外还有什么方法呢？
其实在 DOM 中提供了许多 API 让我们可以操作 Node (节点)，下面就让我们用实际範例说明要如何从无到有新增一个元素吧！

假设今天有一 div，我们想用 JavaScript 在 div 中加入标题和两个 input 元素：

<!-- 原始 HTML 程式 --><div id="container"></div><!-- 动态加入标题和两个 input 最终程式结构如下 --><div id="container">    <h>请输入姓名</h>    <input value="111">    <input type="button" value="确认"></div>

建立节点

要在原有的结构中加入新的节点，第一步要做的是「建立节点」！
前面我们有说过 Node 主要分为四种：document、element (元素节点)、text (文字节点)、及 attribute (属性节点)，除了 document 无法创造外，其他三种节点都有相对应的 DOM API。

createElement 建立元素节点：语法为 document.createElement(要建立的元素标籤名)createTextNode 建立文字节点：语法为 document.createTextNode(文字内容)createAttribute 建立属性节点：语法为 document.createAttribute(属性名)

而在本範例中，我们需要新增的元素有三个，其中包含的节点如下：

标题 h：一个 element node h、一个 text node 请输入姓名input 框：一个 element node input、一个 attribute node valueinput 按钮：一个 element node input、两个 attribute node type 和 value

话不多说，现在就先建立第一个「标题 h」需要用到的节点：

// 新增一个元素节点，标籤为 hlet h = document.createElement('h');// 新增一个文字节点，内容为 "请输入姓名"let hText = document.createTextNode('请输入姓名');

补充：在开发中通常会将建立好的节点指到变数中，这是因为我们要将各个不同的节点组合起来成为所需的架构，使用变数可以让程式码更清晰。

组合节点

现在我们已经有了两个标题所需的节点，接下来需要让网页知道这两个节点是「一组」的，在 JavaScript 中用来表示两节点组合关係的方式有以下几种：

appendChild 在指定节点最后一个子节点后插入新节点
语法为 指定节点.appendChild(新节点)，听起来好像有点绕口，白话一点来说就是将新节点放在指定节点「最后一个小孩」的位置。insertBefore 在指定节点后插入新节点
语法为 指定节点.insertBefore(新节点)，这个就比较单纯了，意思就是将某节点插到另一个节点之前的位置。setAttributeNode 为指定元素节点加入属性节点
语法为 元素节点.setAttributeNode(属性节点)，从 HTML 结构中我们可以观察到元素节点和文字节点间的关係都是父子或兄弟，而属性节点则不同，它无法单独存在，所以 setAttributeNode 是专门用来新增属性节点的一个用法。

回到範例，接下来我们要开始组合 h 和 hText 了：
可以看到在题目结构中，h 标籤和 hText 文字内容属于父子关係，所以可以直接以 appendChild 将文字加到 h 中。

h.appendChild(hText);

现在我们的第一个元素已经组合好了，也就是 <h>请输入姓名</h>
最后一个步骤是决定要将这个元素放在页面上的哪里！依照结构来看标题元素是 #container 的第一个子元素，不过目前后面两个元素都还没被我们新增，所以可以直接使用 appendChild 按顺序加上去。

document.getElementById('container').appendChild(h);

到此为止我们已经将第一个标题元素新增好了，接下来两个 input 元素可以直接以此类推，先来新增 input 框需要的节点 - 一个 element node input、一个 attribute node value：

let input = document.createElement('input');let attr = document.createAttribute('value');

关于属性节点，因为结构与其他节点不同，是 key="value" 结构，所以在 create 后还需要新增属性值，而方法就是设定该节点的 nodeValue。

// 设定属性节点的属性值attr.nodeValue = '111';

现在我们已经将节点都新增好了，接下来要用 setAttribute() 将属性节点放到 input 元素节点中，再将组合好的整个 input 加到文档流里。

// 将属性节点加到元素节点中input.setAttributeNode(attr);// 将整个 input 元素放到 HTML 指定处document.getElementById('container').appendChild(input);

到这边为止我们已经完成了两个元素，剩下最后一个 input button。
在刚刚新增 input 框时我们用的是「新增属性节点」的方式，但在属性很多的元素中要一个一个新增再组合很麻烦，所以这边我们使用另一个方式，也就是直接用 element.属性名 = "属性值" 来为元素节点加属性。
接下来就来新增第三个元素吧：

// 不新增属性节点，所以只需新增一个元素节点let btn = document.createElement('input');// 直接以 element.属性名 = "属性值" 的方式来加入属性btn.type = "button";btn.value = "确认";// 将组合好的元素放到文档流 (HTML) 指定处document.getElementById('container').appendChild(btn);

到这边为止我们的三个元素都被动态的加到网页中啦！

完整程式码

// 新增 h 标题// 建立 h 所需的节点 (h 元素节点和文字节点)let h = document.createElement('h');let hText = document.createTextNode('请输入姓名');// 将文字节点放到 h 元素节点中h.appendChild(hText);// 将组合好的元素放到文档流 (HTML) 指定处document.getElementById('container').appendChild(h);// 新增 input 框// 建立 input 所需的节点 (元素节点和属性节点)let input = document.createElement('input');let attr = document.createAttribute('value');// 将属性值塞到属性节点中attr.nodeValue = '111';// 将属性节点加到元素节点中input.setAttributeNode(attr);// 将组合好的元素放到文档流 (HTML) 指定处document.getElementById('container').appendChild(input);// 新增 input button// 建立所需的节点 (这边属性结点使用另一种方法，所以不新增)let btn = document.createElement('input');// 直接以 element.属性名 = "属性值" 的方式来加入属性btn.type = "button";btn.value = "确认";// 将组合好的元素放到文档流 (HTML) 指定处document.getElementById('container').appendChild(btn);

createElement 和 innerHTML

上面範例要新增的 HTMl 结构较单纯，而当结构很複杂时，例如需要新增一个拥有很多子孙元素的 div 元素到页面上时，以每个都 create 的方式会非常繁杂。
在实际开发中我们最常用的还是以 createElemnt 结合 innerHTML 来做使用，我们可以先 create 最外层的元素，再将其他的子元素 HTMl code 以 innerHTML 的方式加入，这样可以省掉不少添加和组合的时间。

範例：
在 container 中新增一个有 input 框、多选框、及按钮的表单 (form)。

// 新增 form element nodelet form = document.createElement('form');// 将 html code 加到 form 中form.innerHTML = '<span>请输入姓名</span><br/><input value=""><br/>' +                 '<div><input type="checkbox" name="check"/><label>男</label></div>' +                 '<div><input type="checkbox" name="check"/><label>女</label></div>' +                 '<input type="button" value="确认">';// 将 form 加到页面中document.getElementById('container').appendChild(form);

---

上一篇：[快速入门前端 62] JavaScript：DOM (4) 修改元素的属性值
下一篇：[快速入门前端 64] JavaScript：DOM (5) 节点的 CRUD - 修改、删除
系列文章列表：[快速入门前端] 系列文章索引列表