Question

我有这个问题，我正在努力让我头疼，因为我似乎无法找到bug的位置。这是标记：

<div class="excerpt">
     <p>...</p>
</div>

<div class="bio">
     <p>...</p>
</div>

当用户单击按钮时，我想显示div.bio中显示的任何内容以显示在div.excerpt中。这是我的click（）函数。

$('.button').click( function() { 
     var bio = $('.bio p'); 
     var excerpt = $('.excerpt'); 

     // empty 
     excerpt.empty(); 

     // replace
     bio.appendTo(excerpt); 

});

问题是此代码在附加期间从bio中删除段落。有没有办法简单地追加而不是从源中删除元素？或者我做错了什么？

Answer 1

当您在DOM树的现有部分上使用append或appendTo时，实际上正在移动它们。正如文档所述，

如果以这种方式选择的元素插入其他地方，它将是移入目标（未克隆）：

您还需要使用clone将元素的副本添加到树中。例如：

bio.clone().appendTo(excerpt);

Answer 2

试试这个，就像Jon建议的那样：

 $('.button').click( function() { 
      var bio = $('.bio p'); 
      var excerpt = $('.excerpt'); 

      // empty 
      excerpt.empty(); 

      // replace
      bio.clone().appendTo(excerpt); 
 });

Answer 3

虽然其他一些答案可能会奏效，但这看起来很简洁。

$('.button').click( function() { 
    $('.excerpt').html($('.bio').html());
});

为什么我的jquery附加不正常？

3 个答案: