两次追加DOM元素（jQuery）

Question

有人可以解释为什么以下片段不会将<foo>添加到#a和#b？

HTML：

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

JS：

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

jsfiddle

编辑：感谢有用的点，.append()移动元素的事实解释了这种行为。由于我的应用程序中的元素实际上是一个Backbone View的.el，我宁愿不克隆它。

Answer 1

因为使用append实际上移动了元素。因此，您的代码将$foo移动到#a的文档中，然后将其从#a移动到#b。你可以克服它而不是像你想要的那样克隆它 - 这样它就会附加一个克隆而不是初始元素：

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

您还可以附加来自html的$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);
//...

Answer 2

试试clone。顾名思义，这将复制$foo元素而不是像append那样移动。

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

但是，为什么不用这个呢？

$("#a,#b").append($foo);

这也可以:)

以下是这两种情况的演示：http://jsfiddle.net/hungerpain/sCvs7/3/

Answer 3

每次想要附加到DOM时都需要create a new instance。

否则它引用已经附加的相同实例。

删除要添加的新div之前的$符号，因为它评估为jQuery对象并具有上述限制。或clone元素。

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

Check Fiddle

Answer 4

您可以使用.clone（）方法创建一个新实例以附加到DOM，因为您当前的代码只引用了两次相同的实例。

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