有人能解释一下为什么下面的 sn-p 没有在 #a 和 #b 中添加 <foo> 吗？
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，因此我不想克隆它。
【问题讨论】：
标签： javascript jquery html dom dom-manipulation
因为使用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 中的元素创建的。
如果它实际上只是简单地以这种方式创建并为此目的......根本没有理由创建该jQuery对象，您可以直接附加字符串本身（"<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 时，您都需要create a new instance。
否则它指的是已经附加的同一个实例。
删除要添加的新 div 之前的 $ 符号，因为它评估为 jQuery 对象并具有上述限制。或clone 元素。
$(function(){
var foo = "<foo>HI</foo>";
$("#a").append(foo);
$("#b").append(foo);
});
【讨论】：
foo 变量中删除 $ 前缀，因为它现在包含一个字符串而不是 jQuery 对象。
您可以使用 .clone() 方法创建一个新实例以附加到 DOM，因为您当前的代码只是两次引用同一个实例。
$(function(){
var $foo = $("<foo>HI</foo>");
var $foo2 = foo.clone();
$("#a").append($foo);
$("#b").append($foo2);
});
【讨论】：
我尝试了一个技巧，它奏效了。我只是将一个按钮单击的功能嵌套在另一个按钮中。 我的意思是我每次都在改变父母以避免这个问题。主要的是，当我为 button1 click 编写 click 函数时，button2 逻辑写在它下面，而 button3 click 逻辑写在 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>【讨论】：