.clone（）和.html（）之间有什么区别？

What is the difference between Jquery's .clone() and .html() functions?

Jquery的.clone()和.html()函数有什么区别?

Jquery documentation states:

Jquery文档说明:

The .clone() method performs a deep copy of the set of matched elements, meaning that it copies the matched elements as well as all of their descendant elements and text nodes.

.clone()方法执行匹配元素集的深层副本,这意味着它复制匹配的元素及其所有后代元素和文本节点。

In an HTML document, .html() can be used to get the contents of any element. If the selector expression matches more than one element, only the first match will have its HTML content returned.

在HTML文档中,.html()可用于获取任何元素的内容。如果选择器表达式与多个元素匹配,则只返回第一个匹配的HTML内容。

To me these seem to interchangeable, so are there specific situation where one would be used of the other?

对我来说,这些似乎是可以互换的,那么是否会有另一个人使用的具体情况呢?

4 个解决方案

#1

.clone() returns a jQuery object while .html() returns a string.

.clone()返回一个jQuery对象,而.html()返回一个字符串。

Use .clone() if you want a copy of the jQuery objects and use .html() to get the inner HTML of a jQuery object in a string format. Each method has its own purpose (and cost).

如果你想要一个jQuery对象的副本并使用.html()来获取字符串格式的jQuery对象的内部HTML,请使用.clone()。每种方法都有自己的目的(和成本)。

Also, as sgroves pointed out, ".clone() performs a deep copy of the set of elements found by the selector, while .html() only [uses] the first matched element."*

另外,正如sgroves指出的那样,“。clone()执行选择器找到的元素集的深层副本,而.html()仅[使用]第一个匹配的元素。”*

*Although note that .html(newContent) will set the inner HTML of a set of matched elements. Fiddle

*虽然注意.html(newContent)将设置一组匹配元素的内部HTML。小提琴

Another note: the (generally) "faster" option is to use strings rather than jQuery objects when doing DOM manipulation (JSPerf). Thus, I'd recommend .html() if all you need is text content. Again though: each method has its own purpose.

另一个注意事项:(通常)“更快”选项是在进行DOM操作(JSPerf)时使用字符串而不是jQuery对象。因此,如果您需要的是文本内容,我建议使用.html()。尽管如此:每种方法都有自己的目的。

#2

Here are a list of differences :

以下是差异列表:

.clone can be used on multiple selected elements while .html() returns only the html of the first element.

.clone可用于多个选定元素,而.html()仅返回第一个元素的html。
.clone returns a jQuery object while .html returns a string.

.clone返回一个jQuery对象,而.html返回一个字符串。
.clone can (if specified) keep any event and data of the DOM element. .html will not.

.clone可以(如果指定)保留DOM元素的任何事件和数据。 .html不会。
.clone makes a copy of the selected element and all its descendents while .html only gets its descendents. In other words, comparing to DOM methods, .clone is similar to .outerHTML and .html is more like .innerHTML.

.clone只复制所选元素及其所有后代,而.html只获取其后代。换句话说,与DOM方法相比,.clone类似于.outerHTML,而.html更像是.innerHTML。

#3

The clone() method will copy the data and events associated with the DOM elements that are copied, this method returns a jQuery object of the target. html() is just the string representation of the DOM, which means that none of the events/data associated with that portion of the DOM will be copied, this method returns just a string.

clone()方法将复制与复制的DOM元素关联的数据和事件,此方法返回目标的jQuery对象。 html()只是DOM的字符串表示,这意味着不会复制与该DOM部分相关的任何事件/数据,此方法只返回一个字符串。

Edit #2 Removed my comments about clone() being just as fast as html(), it is actually slower. Examples can be seen below in Casey Falk's comments.

编辑#2删除了关于clone()的评论和html()一样快,它实际上更慢。下面的例子可以在Casey Falk的评论中看到。

#4

from the quoted sentences you posted above the answer is there:

从您在上面发布的引用句子回答是:

.clone()it copies the matched elements as well as all of their descendant elements and text nodes. means it select all the elements within the selector.

.clone()它复制匹配的元素以及它们的所有后代元素和文本节点。意味着它选择选择器中的所有元素。

while .html() it only selects the first element.

而.html()只选择第一个元素。

#1