What's the difference between .clone() and .html()?
.clone()
returns a jQuery object while .html()
returns a string.
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).
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."*
*Although note that .html(newContent)
will set the inner HTML of a set of matched elements. Fiddle
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.
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
returns a jQuery object while.html
returns a string..clone
can (if specified) keep any event and data of the DOM element..html
will not..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.