在JavaScript中有insertBefore(),但如何在不使用jQuery或其他库的情况下在另一个元素之后插入一个元素?
当前回答
方法节点。After (doc)在另一个节点之后插入一个节点。
对于两个DOM节点node1和node2,
node1.after(node2)在node1之后插入node2。
这个方法在旧的浏览器中是不可用的,所以通常需要填充。
其他回答
这是使用普通javascript在另一个元素之后添加一个元素的最简单方法
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
参考: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
if( !Element.prototype.insertAfter ) {
Element.prototype.insertAfter = function(item, reference) {
if( reference.nextSibling )
reference.parentNode.insertBefore(item, reference.nextSibling);
else
reference.parentNode.appendChild(item);
};
}
尽管insertBefore()很好,这里的大多数答案都引用了它。为了增加灵活性,更明确一点,你可以使用:
将insertAdjacentElement()作为refElem。insertAdjacentElement(position, newElem)允许你引用任何元素,并将将要移动的元素插入你想要的位置(position可以是'beforebegin', 'afterbegin', 'beforeend', 'afterend'之一),如下所示:
// refElem.insertAdjacentElement('beforebegin', myElem);
<p id="refElem">
// refElem.insertAdjacentElement('afterbegin', myElem);
... content ...
// refElem.insertAdjacentElement('beforeend', myElem);
</p>
// refElem.insertAdjacentElement('afterend', myElem);
对于类似的用例,其他需要考虑的用例:insertAdjacentHTML()和insertAdjacentText()
引用:
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText
我使用以下命令在选择的末尾插入选项。通过传递null作为第二个参数。我不确定这是否是一个异常的“选择”元素,因为我从来没有尝试过其他任何东西,但如果有人来这里寻找这个可能会有所帮助。在IE上也能工作(令人惊讶)。:)
var x = document.getElementById("SELECT_LIST");
var boption = document.createElement("option");
boption.text = "SOME TEXT";
boption.value = "SOME VALUE";
x.insertBefore(boption, null);
让我们来处理所有的情况
function insertAfter(newNode, referenceNode) {
if(referenceNode && referenceNode.nextSibling && referenceNode.nextSibling.nodeName == '#text')
referenceNode = referenceNode.nextSibling;
if(!referenceNode)
document.body.appendChild(newNode);
else if(!referenceNode.nextSibling)
document.body.appendChild(newNode);
else
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}