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 :

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

2. .clone returns a jQuery object while .html returns a string.

3. .clone can (if specified) keep any event and data of the DOM element. .html will not.

4. .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.