我需要将内容从一个容器移动到另一个容器，包括所有事件侦听器。jQuery没有实现它的方法，但标准的DOM函数appendChild可以实现。

// Assuming only one .source and one .target
$('.source').on('click',function(){console.log('I am clicked');});
$('.target')[0].appendChild($('.source')[0]);

使用appendChild删除.source*并将其放入目标，包括其事件侦听器：Node.appendChild（）（MDN）

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

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

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

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

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

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

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

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

我刚刚使用了：

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

我从这里抓起的。

您可以使用纯JavaScript，使用appendChild（）方法。。。

appendChild（）方法将节点附加为节点的最后一个子节点。提示：如果你想用文本创建一个新段落，请记住将文本创建为附加到段落的文本节点，然后将段落附加到文档中。也可以使用此方法将元素从一个元素移动到另一个提示：使用insertBefore（）方法在指定的、现有的、子节点。

所以你可以这样做来完成这项工作，这是我为你创建的，使用appendChild（），运行并查看它如何适用于你的案例：

函数appendIt（）{var source=document.getElementById（“源”）；document.getElementById（“目标”）.appendChild（源）；}#来源{颜色：白色；背景：绿色；填充：4px 8px；}#目的地{颜色：白色；背景：红色；填充：4px 8px；}按钮{页边空白：20px；}<div id=“source”><p>来源</p></div><div id=“destination”><p>目的地</p></div><button onclick=“appendIt（）”>移动元素</button>

您可以使用：

为了在后面插入，

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

为了插入另一元件内部，

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

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

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