¿Cuál es la forma más eficiente de crear elementos HTML usando jQuery?

Recientemente he estado haciendo muchas ventanas emergentes modales y otras cosas, para las cuales usé jQuery. El método que utilicé para crear los nuevos elementos en la página ha sido abrumadoramente similar a:

$("<div></div>");

Sin embargo, tengo la sensación de que este no es el mejor método ni el más eficiente para hacerlo. ¿Cuál es la mejor manera de crear elementos en jQuery desde una perspectiva de rendimiento?

Esta respuesta tiene los puntos de referencia de las sugerencias a continuación.

Nov 29 '08 09:11 Darko

personalmente sugeriría (para facilitar la lectura):

$('<div>');

algunos números sobre las sugerencias hasta el momento (safari 3.2.1 / mac os x):

var it = 50000;

var start = new Date().getTime();
for (i = 0; i < it; ++i)  {
  // test creation of an element 
  // see below statements
}
var end = new Date().getTime();
alert( end - start );                

var e = $( document.createElement('div') );  // ~300ms
var e = $('<div>');                          // ~3100ms
var e = $('<div></div>');                    // ~3200ms
var e = $('<div/>');                         // ~3500ms              

Nov 29 '2008 02:11 Owen

Pregunta:

¿Cuál es la forma más eficiente de crear elementos HTML usando jQuery?

Respuesta:

Ya que se trata de jQueryentonces, creo que es mejor usar este enfoque (limpio) (que estás usando)

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

MANIFESTACIÓN.

De esta manera, incluso puedes usar controladores de eventos para el elemento específico como

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

MANIFESTACIÓN.

Pero cuando trabaja con muchos elementos dinámicos, debe evitar agregar un evento handlersen un elemento en particular; en su lugar, debe usar un controlador de eventos delegado, como

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

MANIFESTACIÓN.

Entonces, si crea y agrega cientos de elementos con la misma clase, es decir ( myClass), se consumirá menos memoria para el manejo de eventos, porque solo habrá un controlador para hacer el trabajo para todos los elementos insertados dinámicamente.

Actualización: ya que podemos utilizar el siguiente enfoque para crear un elemento dinámico

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

Pero el sizeatributo no se puede configurar usando este enfoque usando jQuery-1.8.0o posterior y aquí hay un informe de error antiguo , mire este ejemplo usando jQuery-1.7.2que muestra que el sizeatributo está configurado 30usando el ejemplo anterior pero usando el mismo enfoque no podemos configurar el sizeatributo usando jQuery-1.8.3, aquí es un violín que no funciona . Entonces, para establecer el sizeatributo, podemos usar el siguiente enfoque

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

O este

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

Podemos pasarlo attr/propcomo un objeto secundario, pero funciona en jQuery-1.8.0 and laterlas versiones. Consulte este ejemplo , pero no funcionará ( jQuery-1.7.2 or earlierno se ha probado en todas las versiones anteriores).

Por cierto, tomado del jQueryinforme de error

Hay varias soluciones. La primera es no usarlo en absoluto, ya que no te ahorra espacio y esto mejora la claridad del código:

Aconsejaron utilizar el siguiente enfoque ( también funciona en modelos anteriores1.6.4 , probado en )

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

Por lo tanto, es mejor utilizar este enfoque, en mi opinión. Esta actualización se realizó después de leer/encontrar esta respuesta y en esta respuesta se muestra que si usa 'Size'(capital S)en lugar de 'size'entonces funcionará bien , incluso enversion-2.0.2

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

Lea también sobre prop , porque hay una diferencia, Attributes vs. Propertiesvaría según las versiones.

Oct 14 '2013 16:10 The Alpha