【EASYDOM系列教程】之插入节点

Node 对象提供了一些用于向 HTML 页面插入节点的方法，通过这些方法我们可以实现向 HTML 页面新增元素，或者移动 HTML 页面中的元素。

appendChild() 方法

Node 对象提供的 appendChild() 方法可以向指定节点的子节点列表的最后添加一个新的子节点。其语法结构如下:

var child = node.appendChild(child);

在上述语法结构中，appendChild() 方法的参数 child 表示添加的新的子节点，同时该子节点也是 appendChild() 方法的返回值。

我们可以通过如下代码示例，学习 appendChild() 方法的使用:

var parent = document.getElementById('parent');
var button = document.createElement('button');
button.setAttribute('class','button');
var text = document.createTextNode('A New Button');
button.appendChild(text);
// 将新节点添加到父节点中
parent.appendChild(button);

在上述代码示例中，我们创建了一个新的 <button> 元素，并且将这个 <button> 元素添加到指定节点的子节点列表的最后面。

值得注意的是: 如果我们是将 HTML 页面中原有的节点插入到指定节点的子节点列表的最后面，那这个被插入的节点会先从原有的位置移除，再插入到指定的位置。

如下代码示例，就是将 HTML 页面原有的节点插入到指定位置:

var parent = document.getElementById('parent');
var button = document.getElementById('btn');
// 将新节点添加到父节点中
parent.appendChild(button);

值得注意的是: appendChild() 方法只能允许在同一个 HTML 页面中实现插入节点的功能，而不能实现跨 HTML 页面的插入节点的功能。

insertBefore() 方法

Node 对象除了提供了 appendChild() 方法可以实现插入节点之外，还提供了 insertBefore() 方法同样可以实现插入节点的功能。其语法结构如下:

var insertedElement = parentElement.insertBefore(newElement, referenceElement);

由于 insertBefore() 方法实现的是将一个节点插入到指定节点的某个子节点的前面。所以，在上述语法结构中:

• 参数 referenceElement 表示指定节点的某个子节点

• 参数 newElement 表示插入的节点

• 调用 insertBefore() 方法的 parentElement 表示指定的节点

• 作为返回值的 insertedElement 表示被插入的节点，即 newElement

我们可以通过如下代码示例，学习 insertBefore() 方法的使用:

// 获取目标父节点
var parentElement = document.getElementById('parent');
// 创建新节点
var newElement = document.createElement('button');
newElement.setAttribute('class','button');
var text = document.createTextNode('A New Button');
newElement.appendChild(text);
// 获取目标节点
var referenceElement = document.getElementById('btn');
// 将新节点添加到父节点中
parentElement.insertBefore(newElement, referenceElement);

值得注意的是: 如果我们是将 HTML 页面中原有的节点插入到指定节点的某个子节点的前面，那这个被插入的节点会先从原有的位置移除，再插入到指定的位置。

如下代码示例，就是将 HTML 页面原有的节点插入到指定位置:

// 获取目标父节点
var parentElement = document.getElementById('parent');
// 获取被插入的节点
var newElement = document.getElementById('button');
// 获取目标节点
var referenceElement = document.getElementById('btn');
// 将新节点添加到父节点中
parentElement.insertBefore(newElement, referenceElement);

值得注意的是: 如果 referenceElement 为 null 则 newElement 将被插入到子节点的末尾。

关于 insertAfter() 方法

我们需要注意的是，Node 对象中并没有提供 insertAfter() 方法。所以，我们并不能像使用 jQuery 中的 insertAfter() 方法一样使用。

但是，如果我们在开发中需要 insertAfter() 方法的话，是可以利用 insertBefore() 方法来实现的。

实现思路其实就是利用 insertBefore() 方法将被插入的节点插入到指定节点的下一个相邻兄弟的前面，最终实现插入到指定节点的后面的效果。

parentElement.insertBefore(newElement, referenceElement.nextSibling);

但由于主流浏览器存在空白节点的问题，所以，在真正实现时不能简单地直接通过 nextSibling 属性来解决的。

最后，真正可以实现 insertAfter() 方法的主要逻辑如下:

var nextElement = referenceElement.nextSibling;
if(nextElement.nodeType === 3){
    nextElement = nextElement.nextSibling;
}
parentElement.insertBefore(newElement, nextElement);

如果 referenceElement 没有下一个相邻的兄弟节点的话，那 referenceElement 一定是该子节点列表的最后一个子节点。这样 referenceElement.nextSibling 返回的值为 ull，newElement 就会被插入到子节点列表的最后面。

值得注意的是: 关于 insertAfter() 方法，我们这里只是提供了一个解决的思路。在具体使用时，可能封装的具体用法也会不同。

---

本教程免费开源，任何人都可以免费学习、分享，甚至可以进行修改。但需要注明作者及来源，并且不能用于商业。

本教程采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。