如何在不使用库的情况下在 JavaScript 中插入一个元素？

在没有外部库的情况下在 JavaScript 中插入一个元素到另一个元素

在 JavaScript 领域，程序员经常寻求操作 DOM 中的元素。虽然 jQuery 和其他库简化了此类任务，但可以在不依赖外部依赖的情况下实现元素插入。

问题：

如何将一个元素插入到另一个元素之后在 JavaScript 中，无需像这样的库的帮助jQuery？

答案：

要在现有节点后插入元素，JavaScript 提供了 insertBefore() 方法。然而，与 insertBefore() 的主要目的是在引用节点之前插入不同，我们可以利用它来实现我们的目标。

以下代码片段演示了如何操作：

referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

其中：

• referenceNode 表示要在其后插入新元素的元素
• parentNode 检索父元素引用节点的元素
• nextSibling 指紧接在引用节点之后的元素。如果引用节点是最后一个子节点，则 nextSibling 将为 null，insertBefore() 将通过追加到列表末尾来处理这种情况。

示例函数：

可以创建一个简洁的函数来封装它操作：

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

测试功能：

要验证我们的代码，我们可以使用以下代码段：

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

var el = document.createElement("span");
el.innerHTML = "test";
var div = document.getElementById("foo");
insertAfter(div, el);

此代码将插入一个测试

之后的元素id 为“foo”的元素。

以上是如何在不使用库的情况下在 JavaScript 中插入一个元素？的详细内容。更多信息请关注PHP中文网其他相关文章！