如何将元素移动到另一个元素中

我想将一个DIV元素移动到另一个元素中。例如，我想移动此（包括所有子对象）：

<div id="source">
  ...
</div>

在这方面：

<div id="destination">
  ...
</div>

所以我有这个：

<div id="destination">
  <div id="source">
    ...
  </div>
</div>

当前回答

我刚刚使用了：

$('#source').prependTo('#destination');

我从这里抓起的。

其他回答

如果要放置元素的div中包含内容，并且希望元素显示在主要内容之后：

  $("#destination").append($("#source"));

如果要放置元素的div中包含内容，并且希望在主要内容之前显示元素：

$("#destination").prepend($("#source"));

如果要放置元素的div为空，或者要完全替换它：

$("#element").html('<div id="source">...</div>');

如果要在上述任一项之前复制元素：

$("#destination").append($("#source").clone());
// etc.

我注意到insertAfter&after或insertBefore&before之间存在巨大的内存泄漏和性能差异。。如果您有大量的DOM元素，或者需要在MouseMove事件中使用after（）或before（），那么浏览器内存可能会增加，接下来的操作将非常缓慢。

我刚刚经历的解决方案是使用inserBefore代替before（），并使用insertAfter代替after（）。

您也可以尝试：

$("#destination").html($("#source"))

但这将完全覆盖#destination中的所有内容。

appendChild正是这样做的——基本上是剪切粘贴。

它将移动选定的元素及其所有子节点。

我的解决方案：

移动：

jQuery("#NodesToMove").detach().appendTo('#DestinationContainerNode')

副本：

jQuery("#NodesToMove").appendTo('#DestinationContainerNode')

注意.detach（）的用法。复制时，请注意不要复制ID。

推荐文章