почему мой jquery Append не работает должным образом?

Question

У меня есть проблема, над которой я работаю, которая вызывает у меня головную боль, потому что я не могу найти причину ошибки.Вот разметка:

<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); 

}); 

Проблема в том, что этот код удаляет абзацы из биографии во время добавления.Есть ли способ просто добавлять, а не удалять элементы из источника?Или я что-то не так делаю?

Answer 1

Когда вы используете append или appendTo на существующих частях дерева DOM, вы фактически перемещаете их.Как указано в документации,

Если элемент, выбранный таким образом, вставлен в другое место, он будет перемещен в цель (не клонирован):

Вам также необходимо использоватьclone, чтобы добавить копию элементов в дерево.Например:

bio.clone().appendTo(excerpt);

Answer 2

Хотя некоторые другие ответы, вероятно, будут работать, это выглядит довольно кратко.

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

Answer 3

Попробуйте, как предложил Джон:

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

      // empty 
      excerpt.empty(); 

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