本文介绍了如何在不使用库的情况下在 JavaScript 中的另一个元素之后插入一个元素?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
JavaScript 中有 insertBefore()
,但是如何在不使用 jQuery 或其他库的情况下在另一个元素之后插入一个元素 ?
There's insertBefore()
in JavaScript, but how can I insert an element after another element without using jQuery or another library?
推荐答案
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
其中 referenceNode
是您要放置 newNode
的节点.如果 referenceNode
是其父元素中的最后一个子元素,那很好,因为 referenceNode.nextSibling
将为 null
和 insertBefore
通过添加到列表的末尾.
Where referenceNode
is the node you want to put newNode
after. If referenceNode
is the last child within its parent element, that's fine, because referenceNode.nextSibling
will be null
and insertBefore
handles that case by adding to the end of the list.
所以:
function insertAfter(newNode, referenceNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
您可以使用以下代码段对其进行测试:
You can test it using the following snippet:
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>
这篇关于如何在不使用库的情况下在 JavaScript 中的另一个元素之后插入一个元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!