无法将已存在的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>