DOM 在已有元素前后插入新元素

在已有元素前插入一个新元素

DOM 有提供现成的方法：insertBefore()，这个方法将把一个新元素插入到一个现有元素的前面。
在调用此方法时，需要告诉它三件事：

1. 新元素：你想插入的元素(newElement)，
2. 目标元素：你想把这个新元素插入到哪个元素(targetElement)之前。
3. 父元素：目标元素的父元素(parentElement)。

该方法的使用语法：

parentElement.insertBefore(newElement, targetElement)

对于此方法，无需搞清楚父元素(parentElement)到底是哪个，因为 targetElement 元素的 parentNode 属性就是它。

例如：我想把 a 元素插入到 b 元素之前，只需要执行下面语句即可。

b.parentNode.insertBefore(a, b)

在现有元素后插入一个新元素

很遗憾，DOM 并没有为此行为提供现成的方法，但，我们可以根据已有的 DOM 方法和属性编写一个 insertAfter 函数。

function insertAfter(newElement, targetElement) {
    let parent = targetElement.parentNode;
    if (parent.lastChild == targetElement) {
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}

这个函数用到了以下 DOM 方法和属性：

• parentNode 属性
• lastChild 属性
• appendChild 方法
• insertBefore 方法
• nextSibling 属性

该函数的操作步骤如下：

1. 首先，这个函数有两个参数：一个是将被插入的新元素，另一个是目标元素。这两个参数通过变量 newElement 和 targetElement 被传递到这个函数；
2. 把目标元素的 parentNode 属性值保存到变量 parent 里；
3. 接下来，检查目标元素是不是 parent 的最后一个子元素，即比较 parent 元素的 lastChild 属性值与目标元素是否存在 “等于” 关系；
4. 如果是，就用 appendChild 方法把新元素追加到 parent 元素上，这样新元素就恰好被插入到目标元素之后；
5. 如果不是，就把新元素插入到目标元素和目标元素的下一个兄弟元素之间。目标元素的下一个兄弟元素即目标元素的 nextSibling 属性。用 insertBefore 方法把新元素插入到目标元素的下一个兄弟元素之前。

参考文献

JavaScript DOM 编程艺术（第2版）