Wie füge ich mehrere identische Elemente zu einem div mit jQuery

Question

Ich muss mehrere leere divs zu einem Container-Element mit jQuery hinzufügen.

Im Moment habe ich die leere html mit einer Schleife

divstr = '<div></div><div></div>...<div></div>'; 

und dann Injizieren, dass in meinem Behälter eine Zeichenfolge am Erzeugung enthält:

$('#container').html(divstr); 

Gibt es eine elegantere Möglichkeit, mehrere einfügen , identische Elemente?

Ich hoffe, etwas zu finden, die nicht brechen würde Verkettungs aber würde den Browser in die Knie nicht bringen. Ein kettenfähiges .repeat() Plugin?

Answer 1

Wenn Sie IE wollen schnell sein - oder die Geschwindigkeit im Allgemeinen betrachten, dann werden Sie wollen zunächst ein DOM-Fragment aufzubauen, bevor es eingesetzt wird.

John Resig erklärt die Technik und beinhaltet einen Performance-Benchmark:

http://ejohn.org/blog/dom-documentfragments/

var i = 10, 
    fragment = document.createDocumentFragment(), 
    div = document.createElement('div'); 

while (i--) { 
    fragment.appendChild(div.cloneNode(true)); 
} 

$('#container').append(fragment); 

ich es erkennen, ist nicht viel Verwendung von jQuery machen das Fragment in den Aufbau, aber ich habe ein Lauf einige Tests und ich kann nicht tun, $ (Fragment) .append() - aber ich habe gelesen, Johns jQuery 1.3 Release soll Änderungen basierend auf den oben verlinkten Forschung enthalten.

Answer 2

Sie können eine normale Schleife mit der append Funktion JQuery verwenden.

for(i=0;i<10; i++){ 
    $('#container').append("<div></div>"); 
} 

Answer 3

Der schnellste Weg, dies zu tun ist, um den Inhalt zuerst mit Strings zu bauen. Es ist VIEL schneller, mit Strings zu arbeiten, um Ihr Dokumentfragment zu erstellen, bevor Sie überhaupt mit dem DOM oder jquery arbeiten. Unglücklicherweise macht der IE eine sehr schlechte Arbeit beim Verketten von Strings, daher ist es am besten, ein Array zu verwenden.

var cont = []; //Initialize an array to build the content 
for (var i = 0;i<10;i++) cont.push('<div>bunch of text</div>'); 
$('#container').html(cont.join('')); 

Ich benutze diese Technik eine Tonne in meinem Code. Sie können sehr große HTML-Fragmente mit dieser Methode erstellen und es ist sehr effizient in allen Browsern.

Answer 4

Sie können eine native JavaScript-Array in einem jQuery wickeln und nutzen map() in ein jQuery (Liste von DOM-Knoten) zu transformieren. Dies wird offiziell unterstützt.

$(['plop', 'onk', 'gloubi']) 
.map(function(i, text) 
{ 
    return $('<div/>').text(text).get(0); 
}) 
.appendTo('#container'); 

Dies wird

<div id="container"> 
<div>plop</div> 
<div>onk</div> 
<div>gloubi</div> 
</div> 

schaffen oft ich diese Technik nutzen, um mich nicht zu wiederholen (DRY).