Question

昨天向我的学生展示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 / prepend的组合或顺序如何，只有第二个在最后。

这是我做某些奇怪或预期的行为，如果预料到，为什么？

Answer 1

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

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

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

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

1 个答案: