Javascript 两次追加DOM元素（jQuery）

有人能解释一下为什么下面的代码段没有将

添加到

#a

和

#b

HTML:

JS:

$（函数（）{
变量$foo=$（“HI”）；
$（“#a”）。追加（$foo）；
$（“#b”）。追加（$foo）；
});

---

编辑：感谢您的帮助，事实上

.append（）

移动元素解释了这种行为。由于我的应用程序中的元素实际上是主干视图的

.el

，因此我不想克隆它。

每次要附加到DOM时，都需要

创建一个新实例

否则，它将引用已附加的同一实例

删除要添加的新div前面的
$
符号，因为该div计算结果为jQuery对象，并具有上述限制。或
克隆
元素

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

$（函数（）{
var foo=“HI”；
$（“#a”）。追加（foo）；
$（“#b”）。追加（foo）；
});

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

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

$（函数（）{
变量$foo=$（“HI”）；
var$foo2=foo.clone（）；
$（“#a”）。追加（$foo）；
$（“#b”）。追加（$2）；
});
尝试
克隆
。顾名思义，这将复制
$foo
元素而不移动，就像
append
一样

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

这也会起作用：）

下面是这两种情况的演示：
，因为使用
append
实际上会移动元素。因此，您的代码将
$foo
移动到
#a
的文档中，然后将其从
#a
移动到
#b
。您可以按如下方式克隆它以获得所需的效果-这样它将附加一个克隆而不是初始元素：

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

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

如果它实际上只是以这种方式创建的，并且是为了这个目的。。。没有理由首先创建jQuery对象，您可以直接附加字符串本身（
“HI”
），如：

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

var foo=“HI”；
$（“#a”）。追加（foo）；
//...
我尝试了一个技巧，它成功了。我只是将一个按钮的点击功能嵌套在另一个按钮中。
我的意思是我每次都在更换家长以避免这个问题。最重要的是，当我为button1 click编写click函数时，button2逻辑写在该函数下，button3 click逻辑写在button2 click方法中，就像层次结构一样。看看代码。你会得到的



你好，世界！
DOM元素插入！
开始做饭
$（文档）.ready（函数（）{
$（“#btn1”）。单击（函数（）{
$（“#lt”）.remove（）；
$（“#parent2”）.html(`
准备中
`);
$（“#btn1”）.remove（）；
$（“#btn2”）。单击（函数（）{
$（“#parent3”）.html(`
订单准备好了吗
`);
$（“#parent2”）.remove（）；
$（“#btn3”）。单击（函数（）{
警报（“订单已完成！！”；
});
});
});
});
如果元素已经存在于DOM中，则append（）只移动它。这就是为什么在第二个append中，元素刚从a移到b。为了让您的观点更明确，我建议从
foo
变量中删除
$
前缀，因为它现在包含一个字符串而不是jQuery对象。@radation，您可能还有另一个问题，请检查控制台，如果这没有帮助。。。用所有相关信息问一个新问题我不知道这与这个问题有什么关系，顺便说一句，这个问题已经有7年历史了。它只是一个替代方法。让页面的行为保持不变…如果你有其他方法的话。分享它。。
$("#a,#b").append($foo);

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

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

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