¿Cómo debo agregar múltiples elementos idénticos a un div con jQuery?

Question

Necesito agregar múltiples divs vacíos a un elemento contenedor usando jQuery.

Por el momento estoy generando una cadena que contiene el código HTML vacío usando un bucle

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

y luego inyectar eso en mi contenedor:

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

¿Hay una manera más elegante para insertar múltiples , elementos idénticos?

Espero encontrar algo que no rompa la cadena pero que no ponga al navegador de rodillas. ¿Un complemento encadenable .repeat()?

Answer 1

Si desea IE para ser rápido - o en general en cuenta la velocidad, entonces usted quiere construir un fragmento DOM primero antes de insertarlo.

John Resig explica la técnica e incluye una referencia de rendimiento:

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

me di cuenta de que no está haciendo una gran cantidad de uso de jQuery en la construcción del fragmento, pero me he encontrado una algunas pruebas y parece que no puedo hacer $ (fragmento) .append() - pero he leído que la versión de jQuery 1.3 de John incluye cambios basados ​​en la investigación vinculada anteriormente.

Answer 2

Puede usar un bucle regular con la función Jquery append.

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

Answer 3

La forma más rápida de hacerlo es crear primero el contenido con cadenas. Es MUCHO más rápido trabajar con cadenas para construir su fragmento de documento antes de trabajar con DOM o jquery. Desafortunadamente, IE hace un trabajo realmente pobre para concatenar cadenas, por lo que la mejor forma de hacerlo es usar una matriz.

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('')); 

Utilizo esta técnica un montón en mi código. Puedes construir fragmentos html muy grandes usando este método y es muy eficiente en todos los navegadores.

Answer 4

Puede envolver una matriz JavaScript nativa en una jQuery y usar map() para transformarla en una jQuery (lista de nodos DOM). Esto es oficialmente compatible.

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

Esto creará

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

que a menudo utilizan esta técnica con el fin de evitar la repetición de mí mismo (SECO).