Quelle est la différence entre jQuery.fn.empty() et jQuery.fn.html(")?

Question

Quelle est la différence entre

$("#header").empty()

et

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

?

Aussi, devrais-je utiliser? $("#header").empty() est plus lisible, mais comment quelque chose pourrait être plus rapide que l' $("#header").html('')?

Answer 1

Il n'y a pas de différence fonctionnelle entre les deux. Utiliser .empty() car il est plus court (plus court) et plus lisible.

Ne vous inquiétez pas à propos de la différence de performances. Rappelez-vous, jQuery n'est pas utilisé parce qu'il s'exécute plus rapidement que la vanille JavaScript — il est utilisé parce que c'est écrit plus vite. Développeur de temps est une valeur beaucoup plus de temps processeur.

Il y a déjà un jsPerf de comparer la performance relative: http://jsperf.com/jquery-empty-vs-html. Chaque cas de test montre qu' .empty() est plus rapide.

---

Directement à partir de l'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() n'ont pas à traiter avec la vérification des éventuels différents types d'argument; il peut y caser hors éléments du DOM.

Answer 2

Voici le code source pour le $().vide

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;
}

Comme vous pouvez le voir, c'est un peu plus compliqué que d' .html('') mais comme Matt suggère jQuery accélère le développement pas nécessairement l'exécution. Comme les commentaires dans le code suggérer qu'il y a des avantages à utiliser le .empty vs .html en termes de nettoyage de l'environnement une fois les nœuds DOM sont supprimés etc

Answer 3

.empty() est beaucoup plus rapide, voir la performance ici: http://jsperf.com/jquery-empty-vs-html/17