如何将元素移动到另一个元素？

我想将一个 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");

例：

$("#appendTo").click(function() {
  $("#moveMeIntoMain").appendTo($("#main"));
});
$("#prependTo").click(function() {
  $("#moveMeIntoMain").prependTo($("#main"));
});

#main {
  border: 2px solid blue;
  min-height: 100px;
}

.moveMeIntoMain {
  border: 1px solid red;
}

<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">move me to main</div>

<button id="appendTo">appendTo main</button>
<button id="prependTo">prependTo main</button>

我的解决方案

移动：

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

复制：

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

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

我刚用过：

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

我从这里抓起来的。