在JavaScript中有insertBefore(),但如何在不使用jQuery或其他库的情况下在另一个元素之后插入一个元素?
当前回答
尽管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
其他回答
输入随身的“强暴”
elementBefore.insertAdjacentHTML('afterEnd', elementAfter.outerHTML)
好处:
烘干机:你不需要将before节点存储在变量中并使用它两次。如果重命名变量,就少发生修改。 golfs比insertBefore更好(如果现有的节点变量名是3个字符长,则打破平衡)
缺点:
较低的浏览器支持,因为更新:https://caniuse.com/#feat=insert-adjacent 将丢失元素的属性,例如事件,因为outerHTML将元素转换为字符串。我们需要它是因为insertAdjacentHTML从字符串而不是元素中添加内容。
让我们来处理所有的情况
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);
}
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
这里的referenceNode是你想把newNode放在后面的节点。如果referenceNode是它的父元素中的最后一个子元素,那很好,因为referenceNode。nextSibling将为null, insertBefore通过添加到列表末尾来处理这种情况。
So:
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
你可以使用下面的代码段来测试它:
函数插入之后(引用节点, 新节点) { 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”>你好</div>
我知道这个问题已经有太多答案了,但没有一个符合我的确切要求。
我想要一个与parentNode行为完全相反的函数。insertBefore -也就是说,它必须接受一个空的referenceNode(接受的答案不接受),而insertBefore将插入在子节点的末尾,这个必须插入在开始,因为否则根本没有办法用这个函数插入到开始位置;同样的原因insertBefore插入在末尾。
因为null referenceNode需要你定位父节点,我们需要知道父节点——insertBefore是parentNode的一个方法,所以它可以通过这种方式访问父节点;我们的函数没有,所以我们需要将父参数作为参数传递。
得到的函数如下所示:
function insertAfter(parentNode, newNode, referenceNode) {
parentNode.insertBefore(
newNode,
referenceNode ? referenceNode.nextSibling : parentNode.firstChild
);
}
或者(如果你必须这么做,我不建议你这么做)你当然可以增强Node原型:
if (! Node.prototype.insertAfter) {
Node.prototype.insertAfter = function(newNode, referenceNode) {
this.insertBefore(
newNode,
referenceNode ? referenceNode.nextSibling : this.firstChild
);
};
}
if( !Element.prototype.insertAfter ) {
Element.prototype.insertAfter = function(item, reference) {
if( reference.nextSibling )
reference.parentNode.insertBefore(item, reference.nextSibling);
else
reference.parentNode.appendChild(item);
};
}