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

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

Primer método

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 método

Otra forma es crear todos los elementos uno a 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 debería 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 las testings de velocidad

Hice tres testings de velocidad a partir de las cuales 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 cual 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.

3 Solutions collect form web for “¿Debería agregar HTML al DOM usando innerHTML o creando nuevos elementos uno por uno?”

Señalo un artículo obsoleto para que las personas prueben esto por sí mismos. Los methods 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 sets de datos drásticamente.

En realidad, ninguno de los methods usa innerHTML , en ambos casos jQuery convierte el HTML en 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, el uso de innerHTML es más lento que la manipulación del DOM, porque invoca el analizador de HTML (que analizará el HTML en el DOM de todos modos).

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

  $('body').append(the stuff) 
  • ¿Cómo convierto una propiedad de position de background de CSS de porcentajes a píxeles?
  • Contador de numbers animados jQuery de cero a valor
  • ¿Cómo hacer un div responsivo desplazable dentro de un div con altura: 100vh?
  • Repare el object en la parte superior de la window del browser cuando se desplaza
  • Cambiar el order de las imágenes a la medianoche
  • ¿Cómo puedo ejecutar una function externa cuando se hace clic en un elemento?
  • No se puede leer la identificación en los componentes JSF
  • Cómo eliminar text entre dos elementos con jQuery
  • Seleccione un número aleatorio de la cadena de 1 y 0 y cambie de color
  • detección de colisión en más de 2 divs con jQuery arrastrable?
  • ¿Cómo sé si estoy usando demasiado javascript / jquery?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.