無法將已存在的h1追加到另一個div中

Question

我試圖在點擊某個按鈕後，將一個h1元素（即已經在HTML中）追加到div中。它應該很容易，但對於我的生活，我無法弄清楚爲什麼這不起作用。

$('button').on('click', function() { 
 
    $('div').append($('h1')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button type="button"></button> 
 
<h1>lorem ipsum</h1> 
 
<div></div>

我知道我可以直接添加一個新的h1到DOM，但我想追加一個已經存在的HTML，因爲它是在實際的項目非常有活力。

任何想法，爲什麼它不工作？

Answer 1

你應該嘗試克隆它

$('div').append($('h1:first').clone()); 

Answer 2

$('button').on('click', function(){ 
 
    
 
    //get h1 content with parent container 
 
    var htmlCont = $('h1').wrap('<p/>').parent().html(); 
 
    $('h1').parent().remove(); 
 
    
 
    /* 
 
    //get h1 content and append it 
 
    var htmlCont = $('h1').html(); 
 
    $('h1').remove(); 
 
    */ 
 
    
 
    $('div').append(htmlCont); 
 
    
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <button type="button">tes</button> 
 
    <h1>lorem ipsum</h1> 
 
    <div></div>