jQuery append removing nodes from original place in HTML

Question

<ul>
    <li class="append-me">Content A</li>
    <li class="append-me">Content B</li>
    <li class="dont-append-me">Content C</li>
</ul>

<a id="append-it" href="#">Append!</a>

<div id="appended-items"></div>

<script>
    $("#append-it").click(function(){
        $("#appended-items").append($(".append-me"));
    });
</script>

When I click Append!, the li's with class="append-me" are successfully added to the div, but the nodes are removed from their original place in the HTML. How can I add the nodes into the div, but not remove them from their original place? Thanks!

Answer 1

You can try:

$("#appended-items").append($(".append-me").clone());