¿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) 
  • Ocultar un `tr` basado en los valores de` td` en la tabla usando jQuery
  • Cómo usar Jquery para colorear el background de un elemento, basado en palabras key dentro del html
  • Campos de input de text de Javascript que muestran text de instrucciones (marcador de position)
  • Girar una image usando Javascript
  • Jquery elimina y agrega el evento clic atrás
  • Cómo evitar que los encabezados de una tabla se puedan orderar mediante el complemento orderable JQuery
  • ¿Podemos get el último valor no seleccionado del complemento jQuery Chosen?
  • Manejo de multilenguaje solo con JQuery
  • Definición de icons en el context. Plugin de menu de jQuery.
  • jquery: ¿qué significa exactamente "$ (this)"?
  • ¿Reproducir el clip de sonido Mp3 en el mouseclick usando jplayer?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.