jQuery append/appendTo/prepend/prependTo，第二次调用先删除答案

【问题标题】：jQuery append/appendTo/prepend/prependTo, second call removes firstjQuery append/appendTo/prepend/prependTo，第二次调用先删除
【发布时间】：2017-04-27 22:51:21
【问题描述】：

昨天向我的学生展示append 和appendTo 之间的区别，发现这种行为我不明白。第一个附加触发并按预期更新我的页面，但是当第二个附加触发时，它会删除第一个更新。我本来预计会附加第二份副本，但事实并非如此。然后我尝试使用prepend 和附加并具有相同的行为。似乎第一个语句运行（我在调试器中停止并查看），然后第二个语句撤消第一个语句。这里非常简单的代码： HTML：

<div id="group-friends" class="group">
       <label>Your friends:</label>
       <input type="text" name="friends[]" value="Joe Schmoe" placeholder="Your friend's name">
</div>

脚本：

<script src="http://code.jquery.com/jquery-3.2.1.min.js"
 integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
 crossorigin="anonymous"></script>

<script>
$(function(){
  var $group = $('#group-friends');

  var $copy = $group.find('input:last').clone();

  $group.append($copy);
  $copy.appendTo($group);
});

无论我做什么 append/appendTo/prepend/prependTo 的组合或顺序，最后只有第二个。

这是我在做一些奇怪或预期的行为吗？如果是预期的，为什么？

【问题讨论】：

当您使用.append 或.appendTo 时，（前置等）它会将内容移动到新位置。通常，我们将这些与新的 html 一起使用，因此不会注意到这一举动。在这种情况下，您将它与副本一起使用，因此第一个不会在复制时移动，但第二个调用会将该副本移动到新位置。

标签： jquery

【解决方案1】：

这是因为您只克隆了一次元素，并且在第二次调用中附加了相同克隆元素的实例。

如果您希望逻辑多次工作，那么您应该重新克隆元素。像这样：

$group.append($copy);
$copy.clone().appendTo($group);

【讨论】：