javascript 两次追加 DOM 元素 (jQuery)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17683549/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Appending a DOM element twice (jQuery)
提问by parsa
Can someone explain why the following snippet does not add <foo>to both #aand #b?
有人能解释一下为什么下面的代码片段没有同时添加<foo>到#a和#b吗？
HTML:
HTML：
<div id="a"></div>
<div id="b"></div>
JS:
JS：
$(function(){
var $foo = $("<foo>HI</foo>");
$("#a").append($foo);
$("#b").append($foo);
});
Edit: thanks for the helpful points, the fact that .append()moves the element explains this behavior. Since the element in my application is actually a Backbone View's .el, I prefer not to clone it.
编辑：感谢有用的观点，.append()移动元素的事实解释了这种行为。由于我的应用程序中的元素实际上是一个主干视图的.el，我不想克隆它。
回答by Dallas
Because using appendactually moves the element. So your code was moving $foointo the document at #a, then moving it from #ato #b. You could clone it instead like this for your desired affect - this way it is appending a clone rather than the initial element:
因为 usingappend实际上移动了元素。所以你的代码移动$foo到文档中#a，然后将它从 移动#a到#b。您可以像这样克隆它以获得您想要的效果 - 这样它会附加一个克隆而不是初始元素：
$(function(){
var $foo = $("<foo>HI</foo>");
$("#a").append($foo.clone());
$("#b").append($foo.clone());
});
You could also append the htmlfrom $foo, which would just take a copy of the dom within it rather than the element itself:
您还可以附加htmlfrom $foo，它只会在其中获取 dom 的副本，而不是元素本身：
$(function(){
var $foo = $("<foo>HI</foo>");
$("#a").append($foo[0].outerHTML);
$("#b").append($foo[0].outerHTML);
});
The above examples are assuming you have a more complicated scenario where $fooisn't just a jQuery object created from a string... more likely it is created from an element in your DOM.
上面的示例假设您有一个更复杂的场景，其中$foo不仅仅是从字符串创建的 jQuery 对象……更有可能是从 DOM 中的元素创建的。
If it is in fact just simply created this way and for this purpose... there is no reason at all to create that jQuery object to begin with, you could simply append the string itself ("<foo>HI</foo>") directly, like:
如果它实际上只是简单地以这种方式创建并出于此目的...根本没有理由创建该 jQuery 对象，您可以简单地直接附加字符串本身 ( "<foo>HI</foo>")，例如：
var foo = "<foo>HI</foo>";
$("#a").append(foo);
//...
回答by krishgopinath
Try clone. This, as the name implies, will copy the $fooelement and not move, like appendwill do.
试试clone。顾名思义，这将复制$foo元素而不是移动，就像append会做的那样。
$(function(){
var $foo = $("<foo>HI</foo>");
$("#a").append($foo.clone());
$("#b").append($foo.clone());
});
But, why not just use this?
但是，为什么不直接使用它呢？
$("#a,#b").append($foo);
This will also work :)
这也将起作用:)
Here's a demo for both these situations : http://jsfiddle.net/hungerpain/sCvs7/3/
这是这两种情况的演示：http: //jsfiddle.net/hungerpain/sCvs7/3/
回答by Sushanth --
You need to create a new instanceevery single time you want to append to the DOM.
你必须create a new instance要追加到每一次DOM。
Otherwise it refers to the same instance which was already appended.
否则，它指的是已经附加的同一个实例。
Remove the $symbol preceding the new div to be added as that evaluates to a jQuery object and has the limitations as above stated. or clonethe element.
删除$要添加的新 div 前面的符号，因为它会评估为 jQuery 对象并且具有上述限制。或clone元素。
$(function(){
var foo = "<foo>HI</foo>";
$("#a").append(foo);
$("#b").append(foo);
});
回答by Jnatalzia
You can use the .clone() method to create a new instance to append to the DOM, since your current code just refers to the same instance twice.
您可以使用 .clone() 方法创建一个新实例以附加到 DOM，因为您当前的代码只是两次引用同一个实例。
$(function(){
var $foo = $("<foo>HI</foo>");
var $foo2 = foo.clone();
$("#a").append($foo);
$("#b").append($foo2);
});
