javascript - son - ¿Cuál es la forma más eficiente de crear elementos HTML utilizando jQuery?

modificar elementos html con javascript

Question

Recientemente he estado haciendo un montón de ventanas emergentes modales y lo que no, para lo que he usado jQuery. El método que utilicé para crear los nuevos elementos en la página ha sido abrumadoramente en la línea de:

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

Sin embargo, tengo la sensación de que este no es el mejor ni el método 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 para las sugerencias a continuación.

Answer 1

Pregunta:

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

Responder:

Ya que se trata de jQuery entonces creo que es mejor usar este enfoque (limpio) (usted está usando)

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

DEMO.

De esta manera, incluso puede utilizar 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'');

DEMO.

Pero cuando trata con muchos elementos dinámicos, debe evitar agregar handlers de handlers en un elemento 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'');
}

DEMO.

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

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

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

Pero el atributo de size no se puede establecer utilizando este enfoque utilizando jQuery-1.8.0 o posterior y aquí hay un informe de error anterior . Mire DEMO. usando jQuery-1.7.2 que muestra que el atributo de size está configurado a 30 usando el ejemplo anterior. pero usando el mismo enfoque no podemos establecer el atributo de size usando jQuery-1.8.3 , aquí hay un violín que no funciona . Entonces, para establecer el atributo de size , 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 pasar attr/prop como un objeto secundario, pero funciona en jQuery-1.8.0 and later versiones jQuery-1.8.0 and later verifican este ejemplo, pero no funcionará en jQuery-1.7.2 or earlier (no se ha probado en todas las versiones anteriores).

Por cierto, tomado del informe de errores jQuery

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

Aconsejaron utilizar el siguiente enfoque (también funciona en los anteriores , probado en 1.6.4 )

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

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

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

También lea sobre prop , porque hay una diferencia, Attributes vs. Properties , varía según las versiones.

Answer 2

Alguien ya ha hecho un punto de referencia: jQuery document.createElement equivalente?

$(document.createElement(''div'')) es el gran ganador.

Answer 3

Creo que estás usando el mejor método, aunque podrías optimizarlo para:

 $("<div/>");

Answer 4

En realidad, si estás haciendo $(''<div>'') , jQuery también usará document.createElement() .

(Basta con echar un vistazo a la línea 117 ).

Existe una sobrecarga de llamadas a funciones, pero a menos que el rendimiento sea crítico (está creando cientos [miles] de elementos), no hay muchas razones para volver a un DOM simple.

Solo la creación de elementos para una nueva página web es probablemente un caso en el que es mejor que te limites a la forma jQuery de hacer las cosas.

Answer 5

Esta no es la respuesta correcta para la pregunta, pero aún así me gustaría compartir esto ...

Usar solo document.createElement(''div'') y omitir JQuery mejorará mucho el rendimiento cuando desee hacer muchos elementos sobre la marcha y agregarlos a DOM.

Answer 6

Estoy usando jquery.min v2.0.3. Es para mi mejor usar lo siguiente:

var select = jQuery("#selecter");
jQuery("`<option/>`",{value: someValue, text: someText}).appendTo(select);

como sigue

var select = jQuery("#selecter");
jQuery(document.createElement(''option'')).prop({value: someValue, text: someText}).appendTo(select);

El tiempo de procesamiento del primer código es mucho más bajo que el segundo código.

Answer 7

No necesita un rendimiento en bruto de una operación que realizará con muy poca frecuencia desde el punto de vista de la CPU.

Answer 8

Personalmente sugeriría (por legibilidad):

$(''<div>'');

Algunos números en las sugerencias hasta ahora (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              

Answer 9

Si tiene una gran cantidad de contenido HTML (más que un simple div), puede considerar crear el HTML en la página dentro de un contenedor oculto, luego actualizarlo y hacerlo visible cuando sea necesario. De esta manera, una gran parte de su marca puede ser analizada previamente por el navegador y evitar que el JavaScript se atasque cuando se le llama. ¡Espero que esto ayude!

Answer 10

Tendrá que entender que la importancia del rendimiento de creación de elementos es irrelevante en el contexto de usar jQuery en primer lugar.

Tenga en cuenta que no hay un propósito real de crear un elemento a menos que realmente lo vaya a utilizar.

Puede sentir la tentación de probar algo como $(document.createElement(''div'')) vs. $(''<div>'') y obtener grandes ganancias de rendimiento al usar $(document.createElement(''div'')) pero eso es solo un elemento que aún no está en el DOM.

Sin embargo, al final del día, querrá usar el elemento de todos modos, por lo que la prueba real debe incluir f.ex. .appendTo ();

Veamos, si pruebas lo siguiente unos contra otros:

var e = $(document.createElement(''div'')).appendTo(''#target'');
var e = $(''<div>'').appendTo(''#target'');
var e = $(''<div></div>'').appendTo(''#target'');
var e = $(''<div/>'').appendTo(''#target'');

Notarás que los resultados variarán. A veces una forma es mejor que la otra. Y esto solo se debe a que la cantidad de tareas en segundo plano en su computadora cambia con el tiempo.

Ponte a prueba aquí

Por lo tanto, al final del día, desea elegir la forma más pequeña y más legible de crear un elemento. De esa manera, al menos, tus archivos de script serán lo más pequeños posible. Probablemente sea un factor más importante en el punto de rendimiento que la forma de crear un elemento antes de usarlo en el DOM.

Answer 11

Un punto es que puede ser más fácil de hacer:

$("<div class=foo id=bar style=''color:white;bgcolor:blue;font-size:12pt''></div>")

Luego hacer todo eso con jquery llamadas.

Answer 12

Yo uso $(document.createElement(''div'')); El benchmarking muestra que esta técnica es la más rápida. Especulo que esto se debe a que jQuery no tiene que identificarlo como un elemento y crear el elemento en sí.

Debería ejecutar puntos de referencia con diferentes motores de Javascript y pesar a su audiencia con los resultados. Toma una decisión desde allí.