JavaScript 中有insertBefore(),但是如何在不使用 jQuery 或其他库的情况下在另一个元素 之后插入一个元素?
insertBefore()
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
referenceNode您要放置的节点在哪里newNode。如果referenceNode是其父元素中的最后一个子元素,那很好,因为referenceNode.nextSibling将通过添加到列表的末尾来处理这种情况null。insertBefore
referenceNode
newNode
referenceNode.nextSibling
null
insertBefore
所以:
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>