javascript - con - innerhtml jquery

¿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.

En este momento estoy generando una cadena que contiene el html vacío usando un bucle

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

y luego inyectándolo en mi contenedor:

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

¿Hay una forma más elegante de insertar elementos múltiples e idénticos?

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

Answer 1

La forma más rápida de hacerlo es crear el contenido primero 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 2

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

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

Answer 3

Si quieres que IE sea rápido o, en general, consideres la velocidad, entonces debes construir un fragmento DOM primero antes de insertarlo.

John Resig explica la técnica e incluye un punto de 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 doy cuenta de que no hace un gran uso de jQuery al compilar el fragmento, pero he realizado algunas pruebas y parece que no puedo hacer $ (fragmento) .append (), pero he leído John''s jQuery 1.3 Se supone que la versión incluye cambios basados ​​en la investigación vinculada anteriormente.

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>

A menudo uso esta técnica para evitar repetirme (DRY).