javascript insertAfter alternatives to nextSibling hack?

本文关键字：hack nextSibling to insertAfter alternatives javascript 更新时间：2023-09-26

我有以下代码:

<div id="container">
<div id="cat1"></div>
<div id="cat2"></div>
<div id="cat3"></div>
</div>

我可以做insertBefore，但没有insertAfter…如果我想在容器中添加另一个cat呢?我真的需要使用nextSibling吗?非常奇怪的是，有一个insertBefore，而一个insertAfter必须使用hack。

还有其他选择吗?

function insertAfter(referenceNode, newNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
insertAfter(document.getElementById("tres"), myscript);

既然可以组合insertBefore和nextSibling，就不需要另一个函数了。如果第二个参数为空，insertBefore的行为与appendChild类似。

你可以像这样扩展原型链来实现insertAfter:

Node.prototype.insertAfter = function(n,r) {this.insertBefore(n,r.nextSibling);};

这将允许你调用:

someContainer.insertAfter(newNode, someReference);

请注意，旧版本的IE不喜欢你弄乱内置对象的原型。

您可以使用下面的函数来代替您的方法，您将获得解决方案

    function insertAfter(referenceNode, newNode) {   
newNode.insertBefore(referenceNode.next());

}