我有以下代码:
<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());
}