Question

我似乎无法找到一个很好的方法来做到这一点，但似乎它应该很简单。我有一个元素，我想附加一个div。然后我有另一个元素，我想克隆并推入该中间div。这就是我希望做的事情：

$("#somediv > ul").after("<div id='xxx'></div>").append($("#someotherdiv").clone());

这似乎很接近，但并不完全存在。这个问题是“append”似乎是在原来的“#somediv＆gt; ul”选择器上运行。这种做法很有道理，但这不是我想要的。我怎样才能最有效地选择我用“after”添加的中间div并将“#someotherdiv”放入其中？

Answer 1

反过来使用insertAfter()。

$("<div id='xxx'></div>")
    .append($("#someotherdiv").clone())
    .insertAfter("#somediv > ul")

尝试在完成工作后将生成的DOM节点添加到文档中。

将节点添加到显示的文档后，浏览器会开始侦听任何更改以刷新视图。在将节点添加到显示的文档之前完成所有工作确实可以提高浏览器的性能。

Answer 2

使用insertAfter（）：

$("<div id='xxx'></div>").insertAfter("#somediv > ul").append($("#someotherdiv").clone())

Answer 3

如何最有效地选择我在“after”中添加的中间div并将“#someotherdiv”添加到其中？

@ Vincent的解决方案可能是获得相同结果的最快方法。但是，如果出于任何原因需要添加带有after()的div，则需要选择它并对其进行操作，您可以使用

.nextAll( [expr] )

Find all sibling elements after the current element. Use an optional expression to filter the matched set.

所以你的js变成了：

$("#somediv > ul")
    .after("<div id='xxx'></div>")
    .nextAll('#xxx')
    .append($("#someotherdiv").clone());