Alguien puede explicar por qué el siguiente fragmento no se agrega<foo> a ambos#a y#b?

HTML:

<div id="a"></div>
<div id="b"></div>

JS:

$(function(){
    var $foo = $("<foo>HI</foo>");
    $("#a").append($foo);
    $("#b").append($foo);
});

jsfiddle

Edit: gracias por los puntos útiles, el hecho de que.append() Mueve el elemento explica este comportamiento. Dado que el elemento en mi aplicación es en realidad una vista de Backbone.el, Prefiero no clonarlo.