2013-07-09 4 views
20

In JQuery, was ist der Unterschied zwischenJQuery Differenz .html ("") vs .empty()

$('#divid').html(""); 

und

$('#divid').empty(); 

Sind intern innerhalb jQuery den gleichen Betrieb beide tun. js?

und welche ist besser zu verwenden.

+1

http://jsperf.com/ –

+5

Die doppelte Markierung sollte einen Link zur vorhandenen Frage – Evan

+1

enthalten '' .empty() '' ist ** viel schneller **: http://jsperf.com/jquery- empty-vs-html/17 – AmpT

Antwort

23

T denken .empty() schneller ist. Dies ist die jQuery Quelle für .empty()

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

Und dies ist die jQuery .html("") Quelle:

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

Es ist klar, können Sie Ihr Bestes wählen.

+1

'' .empty() '' ist der Chef! ** viel schneller **: http://jsperf.com/jquery-empty-vs-html/17 – AmpT

+0

Nach 7+ Jahren der JS-Entwicklung lerne ich endlich diese #facepalm –

2

Aus dem Quellcode der html Funktion, neben vielen anderen Dingen:

 if (elem) { 
      this.empty().append(value); 
     } 

So html Anrufe empty. Somit ist es (marginal) schneller, einfach empty anzurufen. Und natürlich ist es lesbarer.

5

Ich versuchte das folgende in Jsperf und fand heraus, $ ('# divid'). Leer(); besser ist

enter image description here