Wie lassen sich HTML-Elemente mit jQuery am effizientesten erstellen?

Question

In letzter Zeit habe ich eine Menge von modalen Fenster Pop-ups und was nicht, für die ich jQuery verwendet. Die Methode, die ich verwendet, um die neuen Elemente auf der Seite zu erstellen hat überwältigend entlang der Linien der gewesen:

$("<div></div>");

Ich habe jedoch das Gefühl, dass dies nicht die beste oder effizienteste Methode ist. Was ist der beste Weg, um Elemente in jQuery von einer Leistung Perspektive zu erstellen?

Diese Antwort hat die Benchmarks zu den untenstehenden Vorschlägen.

Answer 1

Ich benutze $(document.createElement('div')); Das Benchmarking zeigt diese Technik ist die schnellste. Ich vermute, das liegt daran, dass jQuery es nicht als Element identifizieren und das Element selbst erstellen muss.

Sie sollten wirklich Benchmarks mit verschiedenen Javascript-Engines durchführen und Ihr Publikum mit den Ergebnissen abwägen. Treffen Sie von dort aus eine Entscheidung.

Answer 2

Ich persönlich würde vorschlagen (wegen der Lesbarkeit):

$('<div>');

einige Zahlen zu den bisherigen Vorschlägen (Safari 3.2.1 / mac os x):

var it = 50000;

var start = new Date().getTime();
for (i = 0; i < it; ++i)  {
  // test creation of an element 
  // see below statements
}
var end = new Date().getTime();
alert( end - start );                

var e = $( document.createElement('div') );  // ~300ms
var e = $('<div>');                          // ~3100ms
var e = $('<div></div>');                    // ~3200ms
var e = $('<div/>');                         // ~3500ms

Answer 3

Frage:

Wie lassen sich HTML-Elemente mit jQuery am effizientesten erstellen?

Antwort:

Da es sich um jQuery dann denke ich, dass es besser ist, diesen (sauberen) Ansatz (den Sie verwenden) zu verwenden

$('<div/>', {
    'id':'myDiv',
    'class':'myClass',
    'text':'Text Only',
}).on('click', function(){
    alert(this.id); // myDiv
}).appendTo('body');

DEMO.

Auf diese Weise können Sie sogar Ereignishandler für das jeweilige Element verwenden, wie

$('<div/>', {
    'id':'myDiv',
    'class':'myClass',
    'style':'cursor:pointer;font-weight:bold;',
    'html':'<span>For HTML</span>',
    'click':function(){ alert(this.id) },
    'mouseenter':function(){ $(this).css('color', 'red'); },
    'mouseleave':function(){ $(this).css('color', 'black'); }
}).appendTo('body');

DEMO.

Wenn Sie jedoch mit vielen dynamischen Elementen zu tun haben, sollten Sie das Hinzufügen von Ereignissen handlers in einem bestimmten Element, sollten Sie stattdessen einen delegierten Event-Handler verwenden, wie

$(document).on('click', '.myClass', function(){
    alert(this.innerHTML);
});

var i=1;
for(;i<=200;i++){
    $('<div/>', {
        'class':'myClass',
        'html':'<span>Element'+i+'</span>'
    }).appendTo('body');
}

DEMO.

Wenn Sie also Hunderte von Elementen mit derselben Klasse erstellen und anhängen, d. h. ( myClass ), dann wird weniger Speicher für die Ereignisbehandlung verbraucht, da nur ein Handler für alle dynamisch eingefügten Elemente zuständig ist.

Update : Da können wir folgenden Ansatz verwenden, um ein dynamisches Element zu erstellen

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    'size': '30'
}).appendTo("body");

Aber die size Attribut kann mit diesem Ansatz nicht gesetzt werden, indem jQuery-1.8.0 oder später, und hier ist eine alte Fehlerbericht , siehe dieses Beispiel mit jQuery-1.7.2 was zeigt, dass size Attribut wird gesetzt auf 30 mit dem obigen Beispiel, aber mit dem gleichen Ansatz können wir nicht setzen size Attribut mit jQuery-1.8.3 hier ist ein nicht funktionierende Fiedel . Um also die size Attribut können wir folgenden Ansatz verwenden

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    attr: { size: "30" }
}).appendTo("body");

Oder diese hier

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    prop: { size: "30" }
}).appendTo("body");

Wir können die attr/prop als untergeordnetes Objekt, aber es funktioniert in jQuery-1.8.0 and later Versionen prüfen dieses Beispiel aber es Funktioniert nicht en jQuery-1.7.2 or earlier (nicht in allen früheren Versionen getestet).

Übrigens, entnommen aus jQuery Fehlerbericht

Es gibt mehrere Lösungen. Die erste ist, sie überhaupt nicht zu verwenden, da es keinen Platz spart und die Klarheit des Codes verbessert Codes:

Sie rieten zu folgendem Ansatz ( arbeitet in früheren auch, getestet in 1.6.4 )

$('<input/>')
.attr( { type:'text', size:50, autofocus:1 } )
.val("Some text").appendTo("body");

Es ist also besser, diesen Ansatz zu wählen. Diese Aktualisierung wurde vorgenommen, nachdem ich Folgendes gelesen/gefunden habe diese Antwort und zeigt in dieser Antwort, dass man mit 'Size'(capital S) anstelle von 'size' dann wird es einfach gut funktionieren auch in version-2.0.2

$('<input>', {
    'type' : 'text',
    'Size' : '50', // size won't work
    'autofocus' : 'true'
}).appendTo('body');

Lesen Sie auch über Stütze denn es gibt einen Unterschied, Attributes vs. Properties Sie variiert je nach Version.

Answer 4

Eigentlich, wenn Sie die $('<div>') verwendet jQuery auch document.createElement() .

(Schauen Sie sich einfach an Zeile 117 ).

Es gibt einen gewissen Overhead bei den Funktionsaufrufen, aber wenn die Leistung nicht kritisch ist (Sie erstellen Hunderte [Tausende] von Elementen), gibt es keinen Grund, zu einer einfachen DOM .

Die Erstellung von Elementen für eine neue Webseite ist wahrscheinlich ein Fall, in dem Sie sich am besten an die jQuery Art, Dinge zu tun.

Answer 5

Das ist zwar nicht die richtige Antwort auf die Frage, aber ich möchte sie trotzdem weitergeben...

Mit nur document.createElement('div') und das Überspringen von JQuery wird die Leistung erheblich verbessern, wenn Sie viele Elemente im laufenden Betrieb erstellen und an das DOM anhängen möchten.