Was ist der effizienteste Weg, HTML-Elemente mit jQuery zu erstellen?

Benutze ich $(document.createElement('div')); Benchmarking zeigt diese Technik ist die Schnellste. Ich spekulieren, das ist, weil jQuery nicht identifizieren können, es als ein element, und erstellen Sie das element selbst.

Sollten Sie wirklich laufen benchmarks mit verschiedenen Javascript-engines und Wiegen Sie Ihr Publikum mit den Ergebnissen. Eine Entscheidung von dort.

InformationsquelleAutor der Antwort strager

Frage:

Was ist der effizienteste Weg, um erstellen Sie HTML-Elemente mithilfe von jQuery?

Antwort:

Da es über jQuery dann denke ich ist es besser diese zu verwenden, (sauber) - Ansatz (Verwendung)

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

DEMO.

Diese Weise können Sie auch verwenden, event-Handler für das jeweilige element, 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.

Aber, wenn Sie sind den Umgang mit vielen dynamischen Elementen, sollten Sie vermeiden, hinzufügen von Ereignis - handlers insbesondere element, verwenden Sie stattdessen einen Delegierten event-handler, 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.

Also, wenn Sie erstellen und fügen Sie Hunderte von Elementen gleichen Klasse, D. H. (myClass) dann weniger Speicher verbraucht wird, für event-handling, da nur ein handler wird da sein, um die Arbeit zu tun für alle Elemente dynamisch eingefügt.

Update : Da können wir verwenden folgenden Ansatz erstellen Sie ein dynamisches element

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

Aber die size Attribut kann nicht eingestellt werden mit diesem Ansatz unter Verwendung jQuery-1.8.0 oder später und hier ist eine alte Fehlerbericht, Blick auf dieses Beispiel mit jQuery-1.7.2 was zeigt, dass size Attribut 30 mit obigen Beispiel, aber mit der gleichen Vorgehensweise können wir nicht festlegen size Attribut mit jQuery-1.8.3, hier ist ein non-working fiddle. So, um die size - Attribut, können wir verwenden folgenden Ansatz

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

Oder diese

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

Können wir pass attr/prop wie ein Kind-Objekt, aber es funktioniert in jQuery-1.8.0 and later Versionen überprüfen dieses Beispiel aber es wird nicht funktionieren in jQuery-1.7.2 or earlier (nicht getestet in allen früheren Versionen).

BTW, entnommen jQuery bug-report

Gibt es mehrere Lösungen. Die erste ist, um es nicht verwenden, da
Sie nicht speichern Sie jeden Raum und verbessert die Klarheit der
code:

Rieten Sie verwenden folgenden Ansatz (Werke, die in früheren als gut, getestet in 1.6.4)

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

So, ist es besser, diesen Ansatz verwenden, IMO. Dieses update ist gemacht, nachdem ich gelesen/gefunden diese Antwort und in dieser Antwort zeigt, dass, wenn Sie 'Size'(capital S) statt 'size' dann wird es nur funktionieren, auch in version-2.0.2

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

Lesen Sie auch über prop, denn es ist ein Unterschied, Attributes vs. Properties variiert durch-Versionen.

InformationsquelleAutor der Antwort The Alpha

Wenn Sie eine Menge von HTML-Inhalten (mehr als nur ein einzelnes div), könnte man darüber nachdenken, den HTML-Code in die Seite in einem versteckten container, dann aktualisieren Sie es und machen es sichtbar, wenn Sie benötigt wird. Auf diese Weise, einen großen Teil des markup kann im Voraus analysiert die browser und vermeiden, sich zu verzetteln, indem Sie JavaScript, wenn Sie aufgerufen. Hoffe, das hilft!

InformationsquelleAutor der Antwort Collin Allen

Ich glaube, du bist mit die beste Methode, aber man könnte es optimieren:

 $("<div/>");

InformationsquelleAutor der Antwort tvanfosson

Müssen Sie verstehen, dass die Bedeutung der Erstellung eines Elements die Leistung ist irrelevant im Zusammenhang mit der Verwendung von jQuery in den ersten Platz.

Im Hinterkopf behalten, es gibt keinen wirklichen Zweck, indem es ein element, es sei denn, Sie sind eigentlich Los, um es zu benutzen.

Sie könnten versucht sein, performance-test, so etwas wie $(document.createElement('div')) vs. $('<div>') und bekommen große performance-Gewinne von über $(document.createElement('div')) aber das ist nur ein element, das nicht in der DOM noch.

Jedoch am Ende des Tages, werden Sie wollen, um das element sowieso nicht so der wirkliche test beinhalten sollte f.ex. .appendTo();

Let ' s sehen, wenn Sie testen Sie die folgenden gegeneinander:

var e = $(document.createElement('div')).appendTo('#target');
var e = $('<div>').appendTo('#target');
var e = $('<div></div>').appendTo('#target');
var e = $('<div/>').appendTo('#target');

Werden Sie feststellen, die Ergebnisse variieren. Manchmal ein Weg ist, eine bessere Leistung als die anderen. Und dies nur, weil die Menge von hintergrund-tasks, die auf Ihrem computer im Laufe der Zeit ändern.

Testen Sie sich hier

So, in der Ende des Tages, Sie wollen, um die kleinsten und wichtigsten lesbaren Art und Weise der Erstellung des Elements. So, zumindest, Ihre Skript-Dateien werden mit der kleinsten möglichen. Wahrscheinlich ein bedeutender Faktor auf die performance zeigen, als die Möglichkeit zu schaffen, ein element, bevor Sie es in die DOM.

InformationsquelleAutor der Antwort Jani Hyytiäinen

Einem Punkt ist, kann es einfacher sein, zu tun:

$("<div class=foo id=bar style='color:white;bgcolor:blue;font-size:12pt'></div>")

Dann tun alle, die mit jquery-Aufrufe.

InformationsquelleAutor der Antwort Tobiah