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

Question

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

Jquery documentation states:

The .clone() method performs a deep copy of

Answer 1

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

Answer 2

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.

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.

Answer 3

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.

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

Answer 4

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.

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();

Advantage of using .clone() is that all the styles applied to the elements in .rating-stars will be present as .clone() give back a jquery object while .html() will simply return an string with no styles attached.