在元素后插入元素 - JavaScript

在 Web 开发中，常常需要在已有的 HTML 元素后面插入新的元素。这可以通过使用 JavaScript 实现。本文将讨论不同的方法，以在元素后插入元素。

方法一：使用 insertAdjacentHTML 方法

insertAdjacentHTML 方法可以在指定元素的相对位置插入新的 HTML 元素。此方法需要两个参数：

1. 插入新 HTML 元素的位置，例如 "beforebegin" 、 "afterbegin" 、 "beforeend" 或 "afterend"。
2. 要插入的 HTML 元素。

例如：

let existingElement = document.getElementById("existing-element");
existingElement.insertAdjacentHTML("afterend", "<div>New Element</div>");

此代码将在 id 为 "existing-element" 的元素之后插入一个新元素。"afterend" 参数表示在元素之后插入新元素。

方法二：使用 appendChild 方法

appendChild 方法允许将一个新的子元素添加到指定元素的最后一个子元素。

例如：

let existingElement = document.getElementById("existing-element");
let newElement = document.createElement("div");
newElement.textContent = "New Element";
existingElement.appendChild(newElement);

此代码将在 id 为 "existing-element" 的元素的末尾添加一个新元素。要插入的元素首先通过 createElement 方法创建，并设置其文本内容。然后，使用 appendChild 方法将其添加为现有元素的子元素。

方法三：使用 insertBefore 方法

insertBefore 方法将新的子元素插入到指定元素的一个指定位置。此方法需要两个参数：

1. 要插入的新子元素。
2. 参考子元素。新元素将被插入参考元素之前。

例如：

let existingElement = document.getElementById("existing-element");
let newElement = document.createElement("div");
newElement.textContent = "New Element";

existingElement.insertBefore(newElement, existingElement.nextSibling);

此代码将在 id 为 "existing-element" 的元素之后插入一个新元素。使用 nextSibling 属性获取现有元素的下一个节点，并将其作为参考节点传递给 insertBefore 方法。

以上就是在 JavaScript 中在元素后插入其他元素的三种方法。具体方法可以根据实际需求选择。