jQuery, das ein Array von Elementen anhängt

Question 1

Nehmen wir zum Zweck dieser Frage an, wir müssen append() 1000 Objekte zum body Element.

Du könntest so vorgehen:

for(x = 0; x < 1000; x++) {
    var element = $('<div>'+x+'</div>');
    $('body').append(element);
}

Dies funktioniert, erscheint mir jedoch ineffizient, da dies AFAIK zu 1000 Dokumentenumbrüchen führen wird. Eine bessere Lösung wäre:

var elements = [];
for(x = 0; x < 1000; x++) {
    var element = $('<div>'+x+'</div>');
    elements.push(element);
}
$('body').append(elements);

Dies ist jedoch keine ideale Welt, und dies wirft einen Fehler auf Could not convert JavaScript argument arg 0 [nsIDOMDocumentFragment.appendChild]. ich verstehe das append() kann nicht mit Arrays umgehen.

Wie würde ich verwenden jQuery (Ich kenne die DokumentFragment Knoten, aber nehme an, ich muss andere jQuery-Funktionen für das Element verwenden, z .css()) eine Reihe von Objekten auf einmal zum DOM hinzufügen, um die Leistung zu verbessern?

Question 2

Sie könnten anstelle eines Arrays ein leeres jQuery-Objekt verwenden:

var elements = $();
for(x = 0; x < 1000; x++) {
    elements = elements.add('<div>'+x+'</div>');
    // or 
    // var element = $('<div>'+x+'</div>');
    // elements = elements.add(element);
}
$('body').append(elements);

Dies kann nützlich sein, wenn Sie Dinge mit neu generierten Elementen innerhalb der Schleife tun möchten. Beachten Sie jedoch, dass dadurch ein riesiger interner Stapel von Elementen (innerhalb des jQuery-Objekts) erstellt wird.

Es scheint aber so Ihr Code funktioniert einwandfrei mit jQuery 1.8.

Question 3

Du könntest einfach anrufen

$('body').append(elements.join(''));

Oder Sie können erst einmal eine große Zeichenfolge erstellen.

var elements="";
for(x = 0; x < 1000; x++) {
    elements = elements + '<div>'+x+'</div>';
}
$(document.body).append(elements);

Wie Sie bereits erwähnt haben, ist der wahrscheinlich “richtigste” Weg die Verwendung eines DocFrag. So könnte es aussehen

var elements = document.createDocumentFragment(),
    newDiv;
for(x = 0; x < 1000; x++) {
    newDiv = document.createElement('div');
    newDiv.textContent = x;
    elements.append( newDiv );
}
$(document.body).append(elements);

^{.textContent wird von IE<9 nicht unterstützt und würde zur Verwendung eine bedingte Prüfung erfordern .innerText oder .text stattdessen.}

Question 4

Upgrade auf jQuery 1.8, das funktioniert wie vorgesehen:

$('body').append([
    '<b>1</b>',
    '<i>2</i>'   
]);

Question 5

Da $.fn.append eine variable Anzahl von Elementen benötigt, können wir sie verwenden apply um das Array als Argumente zu übergeben:

el.append.apply(el, myArray);

Dies funktioniert, wenn Sie ein Array von jQuery-Objekten haben. Gemäß der Spezifikation können Sie jedoch ein Array von Elementen anhängen, wenn Sie die DOM-Elemente haben. Wenn Sie ein Array von HTML-Strings haben, können Sie sie einfach .join(”) und alle auf einmal anhängen.

Question 6

Eine kleine Änderung zu Ihrem zweiten Ansatz:

var elements = [],
newDiv;
for (x = 0; x < 1000; x++) {
    newDiv = $('<div/>').text(x);
    elements.push(newDiv);
}
$('body').append(elements);

$.append() kann sicherlich ein Array anhängen: http://api.jquery.com/append/

.append(Inhalt) | Inhalt: Ein oder mehrere zusätzliche DOM-Elemente, Arrays von Elementen, HTML-Strings oder jQuery-Objekte, die am Ende jedes Elements in den Satz übereinstimmender Elemente eingefügt werden.

Question 7

Manchmal ist jQuery nicht die beste Lösung. Wenn Sie viele Elemente an das DOM anhängen müssen, documentFragment ist eine gangbare Lösung:

var fragment = document.createDocumentFragment();
for(var i = 0; i < 1000; i++) {
    fragment.appendChild(document.createElement('div'));
}
document.getElementsByTagName('body')[0].appendChild(fragment);

Question 8

Wenn Sie nach roher Leistung streben, würde ich reines JS vorschlagen, obwohl einige argumentieren würden, dass Ihre Entwicklungsleistung wichtiger ist als die Leistung Ihrer Website / Ihres Programms. Überprüfen Sie dies Verknüpfung für Benchmarks und eine Präsentation verschiedener DOM-Einfügungstechniken.

bearbeiten:

Als Kuriosum, documentFragment erweist sich als eine der langsamsten Methoden.