Q:

Unable to append an already-existing h1 to another div

I'm trying to append an h1 element (that is already in the HTML) to a div, once you click on a button. It should be pretty easy but for the life of me I can't figure out why this isn't working. 

$('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>

I know I can just directly add a new h1 to the DOM, but I'm trying to append the one already there in the HTML because it's very dynamic in the actual project.
Any ideas why it's not working?

A:

you should try cloning it
$('div').append( $('h1:first').clone() ); 

