如何将元素移动到另一个元素？
我想在另一个DIV元素中移动一个DIV元素。 例如，我想移动这个（包括所有的孩子）：
<div id="source"> ... </div> 进入这个：
<div id="destination"> ... </div>
所以我有这个：
<div id="destination"> <div id="source"> ... </div> </div>
您可能想要使用appendTo函数（添加到元素的末尾）：
$("#source").appendTo("#destination");
或者，您可以使用prependTo函数（添加到元素的开头）：
$("#source").prependTo("#destination");
我的解决scheme
移动：
jQuery("#NodesToMove").detach().appendTo('#DestinationContainerNode')
复制：
jQuery("#NodesToMove").appendTo('#DestinationContainerNode')
请注意.detach（）的用法。 复制时请注意不要复制ID。
我只是用了：
$('#source').prependTo('#destination');
我从这里抓到的
如果您要放置元素的div在内部有内容，并且您希望元素在主要内容之后显示：
$("#destination").append($("#source"));
如果您要放置元素的div在其中包含内容，并且您希望在主要内容之前显示元素：
$("#destination").prepend($("#source"));
如果你想把你的元素的div是空的，或者你想完全replace它：
$("#element").html('<div id="source">...</div>');
如果你想复制上面的任何一个元素：
$("#destination").append($("#source").clone()); // etc.
那么JavaScript解决scheme呢？
声明一个片段：
var fragment = document.createDocumentFragment();
将所需的元素追加到片段中：
fragment.appendChild(document.getElementById('source'));
追加片段到所需的元素：
document.getElementById('destination').appendChild(fragment);
一探究竟。
您可以使用：
插入后，
jQuery("#source").insertAfter("#destination");
要插入另一个元素，
jQuery("#source").appendTo("#destination");
如果您想要快速演示以及有关如何移动元素的更多详细信息，请尝试以下链接：
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
function move() { jQuery("#source") .detach() .appendTo('#destination'); }
#source{ background-color:red; color: #ffffff; display:inline-block; padding:35px; } #destination{ background-color:blue; color: #ffffff; display:inline-block; padding:50px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="source"> I am source </div> <div id="destination"> I am destination </div> <button onclick="move();">Move</button>
曾尝试普通的JavaScript … destination.appendChild(source); ？
onclick = function(){ destination.appendChild(source); }
div{ margin: .1em; } #destination{ border: solid 1px red; } #source {border: solid 1px gray; }
<!DOCTYPE html> <html> <body> <div id="destination"> ### </div> <div id="source"> *** </div> </body> </html>
老问题，但到这里，因为我需要将内容从一个容器移动到另一个包括所有事件监听器 。
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并将其放置到包括事件侦听器的目标中： https ： //developer.mozilla.org/en-US/docs/Web/API/Node.appendChild
我注意到insertAfter＆after或insertBefore＆before之间存在巨大的内存泄漏和性能差异。如果您有大量DOM元素，或者您需要在MouseMove事件中使用after（）或before（），则浏览器内存可能会增加，接下来的操作会运行得非常慢。 我刚刚遇到的解决scheme是使用inserBefore而不是before（）和insertAfter而不是（）之后。
你也可以尝试：
$("#destination").html($("#source"))
但是这将完全覆盖#destination 。
