您可能需要使用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>

我刚刚使用了：

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

我从这里抓起的。

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

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

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

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

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

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

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

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

您也可以尝试：

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

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

您可以使用：

为了在后面插入，

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

为了插入另一元件内部，

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

我的解决方案：

移动：

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

副本：

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

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

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

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

我需要将内容从一个容器移动到另一个容器，包括所有事件侦听器。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）

如果您想要快速演示并了解有关如何移动元素的更多详细信息，请尝试以下链接：

http://html-tuts.com/move-div-in-another-div-with-jquery

下面是一个简短的示例：

要在元素上方移动：

$('.whatToMove').insertBefore('.whereToMove');

要在元素后移动，请执行以下操作：

$('.whatToMove').insertAfter('.whereToMove');

要在元素内移动，请在该容器内的所有元素上方：

$('.whatToMove').prependTo('.whereToMove');

要在元素内移动，请在该容器内的所有元素之后：

$('.whatToMove').appendTo('.whereToMove');

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

 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>

使用普通JavaScript解决方案：

// Declare a fragment:
var fragment = document.createDocumentFragment();

// Append desired element to the fragment:
fragment.appendChild(document.getElementById('source'));

// Append fragment to desired element:
document.getElementById('destination').appendChild(fragment);

过来看。

尝试纯JavaScript：destination.appendChild（源代码）；。

onclick=function（）｛destination.appendChild（源）｝；第二部分{边距：.1em；}#目的地{边框：实心1px红色；}#来源{边框：实心1px灰色；}＜div id＝destination＞###</div>＜div id＝源＞***</div>

为了完整起见，本文中提到了另一种方法wrap（）或wrapAll（）。因此，OP的问题可以通过以下方式解决（即，假设＜div id=“destination”/＞还不存在，以下方法将从头创建这样的包装器-OP不清楚包装器是否已经存在）：

$("#source").wrap('<div id="destination" />')
// or
$(".source").wrapAll('<div id="destination" />')

听起来很有希望。然而，当我试图对多个嵌套结构执行$（“[id^=row]”）.wrapAll（“<fieldset></fieldset>”）时，如下所示：

<div id="row1">
    <label>Name</label>
    <input ...>
</div>

它正确地包装了那些＜div＞</div>和<input></input>但是有人把<label></标签>。所以我最终使用了显式的$（“row1”）.append（“#a_predefined_fieldset”）。所以，YMMV。

您可以使用纯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>

Bekim Bacaj回答的肮脏尺寸改进：

div｛border:1px实心；margin:5px｝<div id=“source”onclick=“destination.appendChild（this）”>单击我</div><div id=“destination”></分区>

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

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