如果要放置元素的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（）。

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

 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>

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

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

我的解决方案：

移动：

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

副本：

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

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

您可能需要使用appendTo函数（它将添加到元素的末尾）：

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

或者，您可以使用prependTo函数（添加到元素的开头）：

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

例子：

$（“#appendTo”）.click（function（）{$（“#moveMeIntoMain”）.appendTo（$（“#main”））；});$（“#prependTo”）.click（function（）{$（“#moveMeIntoMain”）.prependTo（$（“#main”））；});#主要的，主要的{边框：2px纯蓝色；最小高度：100px；}.moveMeIntoMain{边框：1px纯红色；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><div id=“main”>main</div><div id=“moveMeIntoMain”class=“moveMeIntoMain”>将我移动到main</div><button id=“appendTo”>appendTo main</button><button id=“prependTo”>prependTo main</button>