javascript - jQuery:将完整的元素移动到另一个元素中，但不仅仅是它的内容

Question

目标 DIV 中必须出现源 DIV 元素。

还有 jQuery appendTo 方法似乎可以为我做这件事。

例如:

<div class="source">Move Me</div>
<div class="destination"></div>

jQuery(document).ready(function(){
    jQuery('.source').contents().appendTo('.destination')
  });

但实际上它只是将源的内容移动到目标 DIV 中，将空的源 DIV 保留在原来的位置:这里是 JSFiddle这证明了这一点。

所以，而不是

<div class="destination">
    <div class="source">Move Me</div>
</div>

appendTo 结果就是

<div class="source"></div>
<div class="destination">Move Me</div>

有没有办法实现

<div class="destination">
    <div class="source">Move Me</div>
</div>

没有额外的包装元素？

Answer 1

$.contents() 将获取元素的内容，但不影响元素本身。 $.append() 和 $.appendTo() 的默认行为是移动整个元素。因此，在您的示例中，您只需使用 jQuery('.source').appendTo('.destination') 即可将 .source 移至 .目的地

jQuery('.source').appendTo('.destination')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="source">Move Me</div>
<div class="destination"></div>