如何在 JavaScript 中的指定元素后插入一个元素，不使用第三方外部库（如 jQuery）

本文将教你如何通过纯 JavaScript 实现这个功能。

使用 insertBefore 方法

insertBefore 是 JavaScript 中的一个 DOM 操作方法，用来在某个指定的节点前插入一个新的节点。它的语法如下：

parentNode.insertBefore(newNode, referenceNode);

• parentNode 是你要操作的父节点。

• newNode 是你要插入的新节点。

• referenceNode 是父节点下的某个子节点，新节点将被插入到它前面。

因为 insertBefore 只能在指定节点之前插入元素，要在某个元素之后插入，必须获取该元素的下一个兄弟节点 nextSibling，然后将新节点插入到这个兄弟节点之前。这样，就实现了“在参考节点后插入新节点”的效果。

实现代码

/**
 * 在参考节点后面插入新节点
 * @param {HTMLElement} referenceNode - 参考节点，即已有的 DOM 元素
 * @param {HTMLElement} newNode - 需要插入的新 DOM 元素
 */
function insertAfter(referenceNode, newNode) {
    // 获取参考节点的父节点
    var parent = referenceNode.parentNode;

    // 获取参考节点的下一个兄弟节点
    var nextSibling = referenceNode.nextSibling;

    // 使用 insertBefore 方法将 newNode 插入到参考节点之后
    parent.insertBefore(newNode, nextSibling);
}

使用示例

假设我们有以下 HTML 结构：

<div id="container">
    <p id="first">第一个段落</p>
    <p id="second">第二个段落</p>
</div>

现在我们想在 #first 段落后面插入一个新的段落：

var firstParagraph = document.getElementById('first');

// 创建一个新的段落元素
var newParagraph = document.createElement('p');
newParagraph.textContent = '这是插入的新段落';

// 调用 insertAfter 函数
insertAfter(firstParagraph, newParagraph);

执行以上代码后，HTML 结构将变为：

<div id="container">
    <p id="first">第一个段落</p>
    <p>这是插入的新段落</p>
    <p id="second">第二个段落</p>
</div>

相关文章：

本文标签: