在 js 中将子 html 对象添加到另一个 html 对象 - Javascript

在开发 Web 应用程序时，经常需要将一个 HTML 元素添加到另一个 HTML 元素中。在 JavaScript 中，可以使用以下方法将子 HTML 对象添加到另一个 HTML 对象中。

使用 appendChild 方法

appendChild 方法是将一个节点添加到另一个节点上的标准方法。我们可以使用以下代码将一个 HTML 元素追加到另一个 HTML 元素中：

const parent = document.getElementById('parent'); // 获取父元素
const child = document.createElement('div'); // 创建子元素
parent.appendChild(child); // 将子元素添加到父元素中

在上面的代码中，我们首先使用 getElementById 方法获取到父元素，然后使用 createElement 方法创建一个新的子元素。最后，我们使用 appendChild 方法将子元素添加到父元素中。

使用 insertBefore 方法

除了使用 appendChild 方法之外，还可以使用 insertBefore 方法将子元素添加到父元素中。不同之处在于，insertBefore 方法可以将新元素插入到任意指定位置，而 appendChild 方法只能将新元素添加到父元素的末尾。

以下是使用 insertBefore 方法将子元素添加到父元素中的示例代码：

const parent = document.getElementById('parent'); // 获取父元素
const referenceNode = document.querySelector('.reference-node'); // 获取一个参考节点
const child = document.createElement('div'); // 创建子元素
parent.insertBefore(child, referenceNode); // 将子元素插入到参考节点前面

在上面的代码中，我们首先使用 getElementById 方法获取到父元素，并使用 querySelector 方法获取到一个参考节点。然后，我们使用 createElement 方法创建一个新的子元素。最后，我们使用 insertBefore 方法将子元素插入到参考节点的前面。

参考文献

• appendChild()
• insertBefore()