JavaScript 在元素之前插入 HTML - JavaScript

在 Web 开发中，有时候需要通过 JavaScript 在已有的 HTML 元素之前插入一些新的 HTML 内容。这可以通过 DOM 操作来实现。在本文中，我们将介绍如何在元素之前插入 HTML 的两种不同的方法并提供示例代码。

使用 insertAdjacentHTML() 方法插入 HTML

insertAdjacentHTML() 方法是 DOM 中可用的另一种插入 HTML 的方法。它可以让我们在目标元素之前或之后插入新的 HTML 内容。语法如下:

element.insertAdjacentHTML(position, text);

其中 position 参数定义了我们要插入 HTML 的具体位置。它允许我们使用以下四个选项之一:

• 'beforebegin': 在目标元素之前插入 HTML。
• 'afterbegin': 在目标元素之下插入 HTML，作为其第一个子元素。
• 'beforeend': 在目标元素之下插入 HTML，作为其最后一个子元素。
• 'afterend': 在目标元素之后插入 HTML。

例如，以下代码将在一个具有 ID "myDiv" 的元素之前插入新的 HTML:

let element = document.getElementById("myDiv");
element.insertAdjacentHTML('beforebegin', '<p>This is a new paragraph.</p>');

在此示例中，我们使用了 getElementById() 方法获取目标元素。我们然后使用 insertAdjacentHTML() 方法，使用 'beforebegin' 选项插入了一些新的 HTML。

使用 insertBefore() 方法插入 HTML

insertBefore() 方法是另一个可以通过 DOM 操作插入 HTML 的方法。与 insertAdjacentHTML() 方法不同，此方法要求我们指定父元素以及要插入的子元素。

以下是 insertBefore() 的语法:

parentElement.insertBefore(newElement, referenceElement);

在这里，我们必须指定 parentElement，其中存在 referenceElement，我们想要在这之前插入 newElement。

例如，以下代码将在一个具有 ID "myDiv" 的父元素之下的一个具有 ID "firstChild" 的子元素之前插入新的 HTML:

let parentElement = document.getElementById("myDiv");
let referenceElement = document.getElementById("firstChild");
let newElement = document.createElement("p");
let newText = document.createTextNode("This is a new paragraph.");
newElement.appendChild(newText);
parentElement.insertBefore(newElement, referenceElement);

在此示例中，我们首先使用 getElementById() 方法获取父元素和参考元素。然后，我们创建了新的 p 元素，并使用 createTextNode() 方法创建了要插入的文本。我们挂载文本到 p 元素上，然后使用 insertBefore() 方法将 p 元素插入到目标位置。

总结

在本文中，我们介绍了两种向 HTML 元素之前插入新 HTML 的方法：insertAdjacentHTML() 和 insertBefore()。insertAdjacentHTML() 方法对于插入简单的 HTML 片段非常有用，而 insertBefore() 方法则更适合使用动态创建的新元素。以上两种方法都依赖于 DOM 操作，可以帮助开发人员动态地创建和修改 Web 页面中的元素。