追加 DOM 元素两次 (jQuery)

有人可以解释为什么以下代码片段没有添加<foo>二者皆是#a and #b?

HTML:

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

JS:

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

jsfiddle http://jsfiddle.net/parsa28/sCvs7/

编辑：感谢您的帮助点，事实是.append()移动元素解释了这种行为。由于我的应用程序中的元素实际上是主干视图的.el，我不想克隆它。

因为使用append实际上移动了元素。所以你的代码正在移动$foo进入文档#a，然后将其从#a to #b。您可以像这样克隆它以获得所需的效果 - 这样它会附加一个克隆而不是初始元素：

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

您还可以附加html from $foo，它只会获取其中 dom 的副本，而不是元素本身：

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

上面的示例假设您有一个更复杂的场景，其中$foo不仅仅是从字符串创建的 jQuery 对象...更有可能它是从 DOM 中的元素创建的。

如果它实际上只是简单地以这种方式创建并且出于此目的...根本没有理由创建该 jQuery 对象，您可以简单地附加字符串本身（"<foo>HI</foo>"）直接，如：

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