请有人解释一下为什么下面的代码片段不能将<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视图的 .el ，因此我更喜欢不克隆它。
使用append实际上会移动元素。所以您的代码将$foo移动到了文档中的#a，然后再从#a移动到#b。你可以像这样克隆它来达到你想要的效果 - 这样它就是追加一个克隆而不是初始元素：
$(function(){
var $foo = $("<foo>HI</foo>");
$("#a").append($foo.clone());
$("#b").append($foo.clone());
});
$foo中的html，这将只是对其中包含的dom进行复制，而不是仅仅复制元素本身：$(function(){
var $foo = $("<foo>HI</foo>");
$("#a").append($foo[0].outerHTML);
$("#b").append($foo[0].outerHTML);
});
$foo不仅仅是通过字符串创建的 jQuery 对象... 更可能是从 DOM 中创建的元素。"<foo>HI</foo>"），如下所示：var foo = "<foo>HI</foo>";
$("#a").append(foo);
//...
尝试使用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/
每次想要添加到DOM中时，您需要创建一个新的实例。
否则，它将引用已经添加的相同实例。
删除要添加的新
$符号，因为它会评估为jQuery对象并具有如上述的限制, 或者 克隆该元素。
$(function(){
var foo = "<foo>HI</foo>";
$("#a").append(foo);
$("#b").append(foo);
});
foo 变量中删除 $ 前缀，因为它现在包含一个字符串而不是 jQuery 对象。 - Frédéric Hamidi$(function(){
var $foo = $("<foo>HI</foo>");
var $foo2 = foo.clone();
$("#a").append($foo);
$("#b").append($foo2);
});
我尝试了一个技巧，它起作用了。我只是将一个按钮点击的函数嵌套在另一个函数中。 我的意思是每次更改父级以避免这个问题。主要的问题是当我为button1点击编写click函数时，button2逻辑写在其中，而button3点击逻辑写在button2 click方法中，就像一个层次结构一样。只需查看代码，您就会明白。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<h1>DOM Element Inserting!</h1>
<div id="parent">
<div id="result">
<button id="btn1" type="submit" class="btn btn-primary">
Start Cooking
</button>
</div>
</div>
<div id="parent2"></div>
<div id="parent3"></div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"
></script>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("#lt").remove();
$("#parent2").html(`
<button id="btn2" type="button" class="btn btn-success">
Being Prepared
</button>
`);
$("#btn1").remove();
$("#btn2").click(function () {
$("#parent3").html(`
<button id="btn3" type="button" class="btn btn-info">
Order Ready
</button>
`);
$("#parent2").remove();
$("#btn3").click(function () {
alert("Order Completed!!");
});
});
});
});
</script>
</body>
</html>