JavaScript 在另一个元素之后插入一个元素 - JavaScript

在开发网页时，经常需要在已有的 HTML 中插入新的元素。本文将介绍如何使用 JavaScript 在另一个元素之后插入一个元素。

方法一：使用 insertAdjacentHTML()

insertAdjacentHTML() 方法可用于向元素添加 HTML 代码。此方法可在四种位置添加新 HTML 代码：

• "beforebegin"：在元素之前
• "afterbegin"：在元素内部的开始处
• "beforeend"：在元素内部的结束处
• "afterend"：在元素之后

要在另一个元素之后添加新元素，请使用 "afterend" 参数。以下是示例代码：

const newElement = '<div>new element</div>';
const referenceElement = document.querySelector('div#referenceElement');
referenceElement.insertAdjacentHTML('afterend', newElement);

以上代码将在名为 "referenceElement" 的元素之后添加一个新元素。

方法二：使用 insertAdjacentElement()

与 insertAdjacentHTML() 方法类似，insertAdjacentElement() 方法可用于向元素添加新元素。以下是示例代码：

const newElement = document.createElement('div');
newElement.textContent = 'new element';
const referenceElement = document.querySelector('div#referenceElement');
referenceElement.insertAdjacentElement('afterend', newElement);

以上代码将在名为 "referenceElement" 的元素之后添加一个新元素。

总结

使用 JavaScript 在另一个元素之后插入新元素的方法有两种：insertAdjacentHTML() 和 insertAdjacentElement()。两种方法具有类似的语法和功能，可根据具体情况选择使用。