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

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

jQuery的文档指出：

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

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

对我而言，这些似乎是可以互换的，那么是否有其他的使用方法？

来源

2014-07-24 Mark

仅基于文档 - “集合的深层副本”与“第一匹配” – jdphenix

我一直卡在.html（）函数中以将相同的内容填充到两个div中。但我问了这个问题后有区别http://stackoverflow.com/questions/24901198/insert-element-into-two-div –

'.clone（true）'可以复制处理程序http://jsfiddle.net/ Fw57V/ –

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

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

此外，如sgroves指出的那样，“.clone()执行组由选择找到的元素的的深层副本，而.html()只[用途]的第一匹配元素。” *

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

另一个注：（一般）“更快”的选择是做DOM操作（JSPerf）时使用的字符串，而不是jQuery的对象。因此，如果您只需要文本内容，我会推荐.html()。虽然：每种方法都有其自己的目的。

来源

2014-07-24 20:16:44

也根据文档，'clone'执行由选择器找到的** set **元素的深层拷贝（我假设它会在这种情况下返回一个jQuery对象数组），而仅仅'html'返回第一个匹配元素的内容。 – sgroves

好点，sgroves。正在更新... –

从您发布的答案上面引述的句子有：

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

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

来源

2014-07-24 20:19:19 k0sh

下面是差异列表：

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

来源

2014-07-24 20:21:25

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

编辑＃2 删除了我对clone（）的评论和html（）一样快，但实际上它比较慢。下面Casey Falk的评论可以看到一些例子。

来源

2014-07-24 20:21:26 glandrum101

您的JSPerf太臃肿了。尝试一个简单的测试：http://jsperf.com/jquery-clone-vs-html-construction –

确实，它更臃肿，但你通常不只是运行.html（）或.clone（）本身。实际的.html（）调用速度要快得多，但是如果将它重新插入到DOM中，则必须重新创建DOM，这需要相当长的时间并克隆它在初期放弃的性能。我会在答案中注意到，因为它可能应该说明。 – glandrum101

没有。 DOM仍然必须为两者创建 - 或者更准确地说，*改变*。我愿意打赌，插入一个jQuery对象比插入innerHTML慢，但是让我们创建一个JSPerf，然后回复你。：）速度测试的目的是*隔离代码的某些方面 - 不要说“哦，但是你永远不会自己做它。” ;）当我在我吃晚饭的时候，让我回到你的Perf，哈哈。 –

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

回答

相关问题