爲什麼我的jQuery的追加工作不正常？

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

當您在DOM樹的現有部分上使用append或appendTo時，您實際上是移動他們。作爲文檔狀態，

如果選擇這樣一個元素被其他地方插入，這將是 移動到目標（未克隆）：

您也需要使用clone添加副本的元素到樹上。例如：

bio.clone().appendTo(excerpt); 

Answer 2

append()移動從一個地方到另一個元件;該元素從一個地方複製到另一個，使用clone()還有：

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

    // empty 
    excerpt.empty(); 

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

}); 

或者你可以先複製它，很明顯：

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

    // empty 
    excerpt.empty(); 

    // replace 
    bio.appendTo(excerpt); 

}); 

Answer 3

試試這個，因爲喬恩建議：

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

     // empty 
     excerpt.empty(); 

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

Answer 4

雖然一些其他的答案可能會工作，這看起來很簡潔。

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