What's the difference between jQuery.fn.empty() and jQuery.fn.html('')?

Question

Is there any difference between

$("#header").empty()

and

$("#header").html('')

?

Also, which should I use? $("#header").empty() is more readable, but how could anything be faster than $("#header").html('')?

Answer 1

There is no functional difference between the two. Use .empty() since it is shorter (more terse) and more readable.

Don't worry about the performance difference. Remember, jQuery isn't used because it runs faster than vanilla JavaScript — it's used because it's written faster. Developer time is worth far more than processor time.

There's already a jsPerf to compare the relative performance: http://jsperf.com/jquery-empty-vs-html. Every single test case shows that .empty() is faster.

---

Straight from the jQuery source:

empty: function() {
    for ( var i = 0, elem; (elem = this[i]) != null; i++ ) {
        // Remove element nodes and prevent memory leaks
        if ( elem.nodeType === 1 ) {
            jQuery.cleanData( elem.getElementsByTagName("*") );
        }

        // Remove any remaining nodes
        while ( elem.firstChild ) {
            elem.removeChild( elem.firstChild );
        }
    }

    return this;
},

html: function( value ) {
    if ( value === undefined ) {
        return this[0] && this[0].nodeType === 1 ?
            this[0].innerHTML.replace(rinlinejQuery, "") :
            null;

    // See if we can take a shortcut and just use innerHTML
    } else if ( typeof value === "string" && !rnocache.test( value ) &&
        (jQuery.support.leadingWhitespace || !rleadingWhitespace.test( value )) &&
        !wrapMap[ (rtagName.exec( value ) || ["", ""])[1].toLowerCase() ] ) {

        value = value.replace(rxhtmlTag, "<$1></$2>");

        try {
            for ( var i = 0, l = this.length; i < l; i++ ) {
                // Remove element nodes and prevent memory leaks
                if ( this[i].nodeType === 1 ) {
                    jQuery.cleanData( this[i].getElementsByTagName("*") );
                    this[i].innerHTML = value;
                }
            }

        // If using innerHTML throws an exception, use the fallback method
        } catch(e) {
            this.empty().append( value );
        }

    } else if ( jQuery.isFunction( value ) ) {
        this.each(function(i){
            var self = jQuery( this );

            self.html( value.call(this, i, self.html()) );
        });

    } else {
        this.empty().append( value );
    }

    return this;
},

.empty() doesn't have to deal with checking the different possible argument types; it can get right down to chucking out DOM elements.

Answer 2

Here's the actual source code for $().empty

function() {
    for ( var i = 0, elem; (elem = this[i]) != null; i++ ) {
        // Remove element nodes and prevent memory leaks
        if ( elem.nodeType === 1 ) {
            jQuery.cleanData( elem.getElementsByTagName("*") );
        }

        // Remove any remaining nodes
        while ( elem.firstChild ) {
            elem.removeChild( elem.firstChild );
        }
    }

    return this;
}

As you can see it's a bit more involved than .html('') but as Matt suggests jQuery speeds up development not necessarily execution. As the comments in the code suggest there are advantages to using .empty vs .html in terms of cleaning up the environment once DOM nodes are removed etc