javascript insertAfter 替代 nextSibling hack？ [复制]

Posted 2023-02-21

【中文标题】javascript insertAfter 替代 nextSibling hack？ [复制]

【英文标题】：javascript insertAfter alternatives to nextSibling hack? [duplicate]

【发布时间】：2013-05-25 02:23:46

【问题描述】：

我有以下代码：

<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);

【问题讨论】：

不，你拥有的真的很好。

你可以做parent.insertBefore(new, old); parent.insertBefore(old, new); 这将通过交换来模拟insertAfter。

@Bergi 我也发现了这一点，但从技术上讲，OP 正在询问是否有比该问题的答案更好的东西。

@ajp15243：显然不是，否则它将成为那里的最佳答案 :-) 基本上这是同一个问题，要求“最佳方式”。

我有一个替代方法，它不是很好，并且添加了垃圾，添加一个id为containerEnd的div并执行insertBefore（elem，containerEnd）。这是另一种选择，但不是更好的选择。

【参考方案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。

【讨论】：

你可能想使用r ? r.nextSibling : this.firstChild :-)

确实，我将不得不这样做，因为我要一个接一个地添加数百张幻灯片。我什至考虑过添加一个 DOM 元素并执行 然后使用 insertBefore(newdiv,containerEnd);用起来感觉自然一点，但是加了垃圾，很奇怪。那就是想要insertAfter，必须使用insertBefore。

等等...你想把它添加为最后一个元素吗？ appendChild 怎么了？

我实际上是在没有确切顺序的情况下添加的，但是在加载时我是一个接一个地装载它们。

【参考方案2】：

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

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

【讨论】：

这个next()方法是什么？