javascript - obtener - insertar codigo html con jquery

¿Debería agregar HTML al DOM usando innerHTML o creando nuevos elementos uno por uno?

Question

Hay dos métodos para agregar código HTML al DOM y no sé cuál es la mejor manera de hacerlo.

Primer metodo

La primera es la más fácil, simplemente podría agregar código HTML (con jQuery) usando $(''[code here]'').appendTo(element); que es muy parecido a element.innerHTML = [code here];

Segundo metodo

Otra forma es crear todos los elementos uno por uno como:

// New div-element
var div = $(''<div/>'', {
id: ''someID'',
class: ''someClassname''
});
// New p-element that appends to the previous div-element
$(''<p/>'', {
class: ''anotherClassname'',
text: ''Some textnode'',
}).appendTo(div);

Este método utiliza funciones básicas como document.createElement y element.setAttribute .

¿Cuándo debo usar el primer método y cuándo el segundo? ¿Es el método dos más rápido que el método uno?

Edición - Resultado de las pruebas de velocidad.

Hice tres pruebas de velocidad de las que sigue el código:

$(document).ready(function(){
// jQuery method - Above mentioned as the second method
$(''#test_one'').click(function(){
startTimer();
var inhere = $(''#inhere'');
for(i=0; i<1000; i++){
$(inhere).append($(''<p/>'', {''class'': ''anotherClassname'' + i, text: ''number'' + i}));
}
endTimer();
return false;
});
// I thought this was much like the jQuery method, but it was not, as mentioned in the comments
$(''#test_two'').click(function(){
startTimer();
var inhere = document.getElementById(''inhere'');
for(i=0; i<1000; i++){
var el = document.createElement(''p'')
el.setAttribute(''class'', ''anotherClassname'' + i);
el.appendChild(document.createTextNode(''number'' + i));
inhere.appendChild(el);
}
endTimer();
return false;
});
// This is the innerHTML method
$(''#test_three'').click(function(){
startTimer();
var inhere = document.getElementById(''inhere''), el;
for(i=0; i<1000; i++){
el += ''<p class="anotherClassname'' + i + ''">number'' + i + ''</p>'';
}
inhere.innerHTML = el;
endTimer();
return false;
});
});

Lo que dio los siguientes resultados realmente sorprendentes.

 Test One Test Two Test Three
+-------------+---------+----------+------------+
| Chrome 5 | ~125ms | ~10ms | ~15ms |
| Firefox 3.6 | ~365ms | ~35ms | ~23ms |
| IE 8 | ~828ms | ~125ms | ~15ms |
+-------------+---------+----------+------------+

En general, el método innerHTML parece ser el más rápido y, en muchos casos, el más legible.

Answer 1

En realidad, ninguno de los métodos usa innerHTML , en ambos casos jQuery convierte el HTML a los nodos DOM. Desde jquery-1.3.2.js:

// If a single string is passed in and it''s a single tag
// just do a createElement and skip the rest
if ( !fragment && elems.length === 1 && typeof elems[0] === "string" ) {
var match = /^<(/w+)/s*//?>$/.exec(elems[0]);
if ( match )
return [ context.createElement( match[1] ) ];
}
// ... some more code (shortened so nobody falls asleep) ...
// Convert html string into DOM nodes
if ( typeof elem === "string" ) {
// Fix "XHTML"-style tags in all browsers
elem = elem.replace(/(<(/w+)[^>]*?)//>/g, function(all, front, tag){
return tag.match(/^(abbr|br|col|img|input|link|meta|param|hr|area|embed)$/i) ?
all :
front + "></" + tag + ">";
});
// etc...
}

En términos generales, el uso de innerHTML es más lento que manipular el DOM, porque invoca el analizador HTML (que de todos modos analizará el HTML en el DOM).

Answer 2

Señalo un article desactualizado con el propósito de que la gente lo pruebe por sí misma. Los métodos de DOM en realidad superan al innerHTML en todas mis máquinas, así que eso es lo que prefiero. Sin embargo, en el momento del artículo, innerHTML era más rápido en promedio. Actualmente la diferencia solo se puede ver en grandes conjuntos de datos de forma drástica.

Answer 3

Si voy a reutilizar el div más adelante en el código, lo construiré y lo pondré en una var, usualmente con un prefijo $, así que sé que es un objeto jquery. Si es algo único, solo haré un:

 $(''body'').append(the stuff)