javascript - javascript insertAfter 替代 nextSibling hack？

Question

我有以下代码：

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

我可以做一个 insertBefore 但没有 insertAfter... 如果我想将另一只猫附加到容器中怎么办？我真的必须使用 nextSibling 吗？很奇怪，有一个 insertBefore 和一个 insertAfter 必须使用 hack。是否有替代方案

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

Answer 1

由于您可以组合insertBeforeand nextSibling，因此不需要其他功能。如果第二个参数为空，则insertBefore具有额外的行为。appendChild

您可以像这样扩展原型链来实现insertAfter：

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

这将允许您调用：

someContainer.insertAfter(newNode, someReference);

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

Answer 2

您可以使用以下功能代替您将获得解决方案的方法。

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

}