小编典典

如何在不使用库的情况下在 JavaScript 中的另一个元素之后插入一个元素?

all

JavaScript 中有insertBefore(),但是如何在不使用 jQuery 或其他库的情况下在另一个元素 之后插入一个元素?


阅读 123

收藏
2022-02-28

共1个答案

小编典典

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

referenceNode您要放置的节点在哪里newNode。如果referenceNode是其父元素中的最后一个子元素,那很好,因为referenceNode.nextSibling将通过添加到列表的末尾来处理这种情况nullinsertBefore

所以:

function insertAfter(newNode, referenceNode) {
    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);


<div id="foo">Hello</div>
2022-02-28