Czy ktoś może wyjaśnić, dlaczego poniższy fragment nie dodaje<foo> do obu#a i#b?

HTML:

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

JS:

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

jsfiddle

Edytuj: dzięki za pomocne punkty, fakt, że.append() przesuwa element wyjaśnia to zachowanie. Ponieważ element w mojej aplikacji jest w rzeczywistości widokiem kręgosłupa.el, Wolę nie klonować tego.