我想将一个DIV元素移动到另一个元素中。例如,我想移动此(包括所有子对象):

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

在这方面:

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

所以我有这个:

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

当前回答

您可以使用:

为了在后面插入,

jQuery("#source").insertAfter("#destination");

为了插入另一元件内部,

jQuery("#source").appendTo("#destination");

其他回答

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

我刚刚经历的解决方案是使用inserBefore代替before(),并使用insertAfter代替after()。

尝试纯JavaScript:destination.appendChild(源代码);。

onclick=function(){destination.appendChild(源)};第二部分{边距:.1em;}#目的地{边框:实心1px红色;}#来源{边框:实心1px灰色;}<div id=destination>###</div><div id=源>***</div>

您也可以尝试:

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

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

您可以使用以下代码将源移动到目标:

 jQuery("#source")
       .detach()
       .appendTo('#destination');

尝试使用CodePen。

函数move(){jQuery(“#source”).detch().appendTo(“#destination”);}#来源{背景色:红色;颜色:#ffffff;显示:内联块;填充:35px;}#目的地{背景色:蓝色;颜色:#ffffff;显示:内联块;填充:50px;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><div id=“source”>我是消息源</div><div id=“destination”>我是目的地</div><button onclick=“move();”>移动</button>

我的解决方案:

移动:

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

副本:

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

注意.detach()的用法。复制时,请注意不要复制ID。