javascript - 两次追加 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()移动元素解释了这种行为。由于我的应用程序中的元素实际上是主干 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);
//...