Question

Jquery的.clone（）和.html（）函数之间有什么区别？

Jquery文档声明：

.clone（）方法执行匹配集的深层副本   元素，意味着它复制匹配的元素以及所有元素   他们的后代元素和文本节点。

在HTML文档中，.html（）可用于获取任何内容   元件。如果选择器表达式匹配多个元素，   只有第一个匹配才会返回其HTML内容。

对我而言，这些似乎是可以互换的，那么是否有一种特定的情况可以使用另一种？

Answer 1

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

如果需要jQuery对象的副本并使用.clone()以字符串格式获取jQuery对象的内部HTML，请使用.html()。每种方法都有其自己的目的（and cost）。

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

*虽然请注意.html(newContent)将设置匹配元素的集的内部HTML。 Fiddle

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

Answer 2

以下是差异列表：

.clone可用于多个选定元素，而.html()仅返回第一个元素的html。
.clone返回一个jQuery对象，而.html返回一个字符串。
.clone可以（如果指定）保留DOM元素的任何事件和数据。 .html不会。
.clone制作所选元素及其所有后代的副本，而.html仅获取其后代。换句话说，与DOM方法相比，.clone类似于.outerHTML，.html更像.innerHTML。

Answer 3

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

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

Answer 4

你在答案上方张贴的句子中的

是：

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

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

Answer 5

<div class='rating-stars'>
                <ul id='stars'>
                    <li class='star' title='Poor' data-value='1'>
                        <i class='fa fa-star fa-fw'></i>
                    </li>
                    <li class='star' title='Fair' data-value='2'>
                        <i class='fa fa-star fa-fw'></i>
                    </li>
                    <li class='star' title='Good' data-value='3'>
                        <i class='fa fa-star fa-fw'></i>
                    </li>
                    <li class='star' title='Excellent' data-value='4'>
                        <i class='fa fa-star fa-fw'></i>
                    </li>
                    <li class='star' title='WOW!!!' data-value='5'>
                        <i class='fa fa-star fa-fw'></i>
                    </li>
                </ul>
</div>
.clone() can also we used in cases where we need to use a piece of code multiple times on out html page. Say we need to include the above code to create star rating multiple times.    
So in this case if we want this same code to be applied multiple times in out html , we can use two ways:-

1。 var ratingStar = $（'。rating-stars'）。html（）;
2. var ratingStar = $（'。rating-stars'）。clone（）;

使用.clone（）的优点是，应用于.rating-stars中元素的所有样式都将以.clone（）的形式返回一个jquery对象，而.html（）只会返回没有样式的字符串

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

5 个答案: