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

由于您可以合并insertBefore和nextSibling，因此无需其他功能。如果第二个参数为空，insertBefore会有类似appendChild的额外奖励。

您可以扩展原型链以实现insertAfter，如下所示：

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

这将允许您致电：

someContainer.insertAfter(newNode, someReference);

请注意，旧版本的IE不喜欢你messing with the prototype of built-in objects。

Answer 2

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

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

}

javascript insert替代nextSibling hack？

2 个答案: