两次追加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);
});

编辑:感谢有用的点,.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());
});

你也可以追加htmlfrom $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);

这也可以:)

Answer 3

您需要create a new instance每次都想要附加到DOM.

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

删除$要添加的新div之前的符号,将其评估为jQuery对象,并具有上述限制.或clone元素.

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