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

Question

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

Primer método

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

Segundo método

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 centrales 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?

Editar - Resultado de speed tests

hice tres pruebas de velocidad de la que el código de la siguiente manera:

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

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 | 
+-------------+---------+----------+------------+ 

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

Answer 1

Señalo una obsoleta article para que las personas la prueben por sí mismas. Los métodos DOM realmente superan el HTML interno 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 drásticamente.

Answer 2

Si voy a volver a utilizar el div más adelante en el código, lo construiré y lo pondré en una var, usualmente con un prefijo $, así sé que es un objeto jquery. Si se trata de una cosa de una sola vez que voy a hacer:

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

Answer 3

En realidad, ni los métodos utilizan innerHTML, en ambos casos jQuery convierte el HTML para nodos DOM. De 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, usando innerHTML es más lenta que la manipulación del DOM, porque invoca el analizador de HTML (que analizar el código HTML en el DOM de todos modos).