create/append node versus innerHTML

Question

¿Alguien tiene una buena razón para usar una sobre la otra? Por lo que puedo decir, crear/agregar nodo simplemente evita que crees código inválido, mientras que innerHTML te permite inyectar múltiples nodos a la vez.

Dado que necesito insertar varias etiquetas, parece tener sentido usar innerHTML. ¿Alguien tiene una toma diferente?

Answer 1

Esto es siempre un argumento polémico, en parte debido a que el origen de innerHTML ser un poco dudoso desde una normas perspectiva. Creo que el artículo de QuirksMode sigue siendo relevante, pero me gustaría verlo actualizado. Quizás contactppk para actualizarlos, aunque estoy seguro de que está ocupado. Todos podríamos beneficiarnos de las pruebas de rendimiento de las suposiciones que hacemos en el desarrollo web. Al final, los reclamos requieren datos duros para probar, de lo contrario, en realidad solo se trata de hablar.

De todos modos, hice algunas búsquedas y encontré algunos artículos interesantes relevantes para esta discusión. No recuerdo haber oído hablar de DocumentFragments antes, son realmente interesantes.

• DOM DocumentFragments
• jQuery Performance Rules
• Improve your jQuery - 25 excellent tips
• Speed test: innerHTML versus DOM manipulation... una prueba de que realmente pone a prueba la velocidad, la pena para cualquier persona que quiere recoger algunos datos actuales sobre los navegadores

Answer 2

Creo que en ciertas plataformas, recibirás un aumento de rendimiento usando las funciones DOM en lugar de innerHTML, ya que no es necesario realizar un análisis HTML costoso.

Answer 3

Depende de cuál sea su objetivo.

El uso de métodos DOM para insertar html en un documento le permitirá manipular aún más esos elementos antes/después de insertarlos.

Answer 4

La diferencia es que la creación de nodos a través del DOM está estandarizada, pero innerHTML es simplemente un estándar de facto. He leído que innerHTML puede ser más rápido.

Una alternativa aún mejor es usar una biblioteca como jQuery para su manipulación de DOM. Se ocupará de la mayoría de las incompatibilidades entre navegadores y será más legible que el uso de los métodos DOM.

Answer 5

Si cuestiones de rendimiento, es bueno saber que el innerHTML es relativamente rápido, especialmente en MSIE: http://www.quirksmode.org/dom/innerhtml.html

Se tiene sin embargo la mala imagen de ser una vivienda de origen "propiedad de Microsoft" y/o no realmente "OO ".

Answer 6

Dado que tengo que insertar varias etiquetas, parece tener sentido usar innerHTML.

Solo "several"? Entonces la velocidad no es un problema. Cuando creas cien tienes que pensar en lo que estás haciendo. El problema no es realmente la creación, sino la manipulación de la lista de nodos secundarios que se vuelve cada vez más lenta a medida que se agregan cada elemento adicional.

En cuanto a anexar, realmente no tiene otra opción. No puedes configurar el innerHTML sin perder el contenido existente, así que a menos que estés satisfecho con serializarlo y volver a analizarlo (lo que borra cualquier información no serializable como el contenido del formulario, las propiedades/referencias de JavaScript y los manejadores de eventos) terminas estableciendo el innerHTML de otro elemento y moviendo a cada niño más de uno por uno. Esto es lo que hacen muchos frameworks y generalmente termina más lento que el manual create-and-appendChild.

Dependiendo de su situación (específicamente: ¿cuántos nodos secundarios ya están en el elemento de destino y cuántos va a agregar?) Puede ser más rápido descomponer la operación en manipulaciones más pequeñas en un Fragmento de documento, cuyos hijos se puede agregar a los elementos de un elemento de una vez en vez de uno por uno. Esto es mucho más rápido. Desafortunadamente, no es posible configurar innerHTML en un DocumentFragment.

También puede haber hacks más rápidos utilizando objetos Range para mover una carga de HTML a la vez, pero desafortunadamente los Rangos son altamente variables entre navegadores. Me parece, sin embargo, que alguien debería ser capaz de construir un append-html rápido de IE's range.pasteHTML y W3's range.extractContents. ¿Alguien listo para eso?

Por lo que yo puedo decir, crear/añadir nodo simplemente le impide crear código no válido

marcado potencialmente no válidos no sólo significa pausas de aplicación en algunos navegadores. Cuando estás ciegamente empalmando juntos HTML sin escapar como un idiota:

element.innerHTML= '<a href="'+url+'">'+title+'</a>'; 

entonces usted tiene un agujero de seguridad-site-scripting cruz de cliente que es tan malo como del lado del servidor uno.

Puede, por supuesto, comprometerse, creando los elementos y configurando su contenido en pasos separados. Por ejemplo:

element.innerHTML= '<table>'+'<tr><td>X</td><td><a href="#">go</a></td></tr>'.repeated(urls.length)+'</table>'; 
for (var i= 0; i<urls.length; i++) { 
    var row= element.firstChild.rows[i]; 
    row.cells[0].firstChild.data= urls[i]; 
    row.cells[1].firstChild.href= urls[i]; 
} 

(string.repeated no es de JavaScript estándar, pero su uso aquí es obvio.)

Answer 7

DOM MANIPULATION ES MUCHO MÁS RÁPIDO SI USTED USA ESTE TRUCO.

Esto es lento:

var target = document.getElementById('whatever'); 
for (a = 0; a<10000; a++) { 
var newnode = document.createElement('div'); 
newnode.textContent = a; 
target.appendChild(newnode) } 

Esto es rápido:

var target = document.createElement('span') 
for (a = 0; a<10000; a++) { 
var newnode = document.createElement('div'); 
newnode.textContent = a; 
target.appendChild(newnode) } 
document.getElementById('whatever').appendChild(target); 

El primer ejemplo anexa el nodo recién creado a un nodo que ya está contenido en el interior del cuerpo por lo que una actualización se hace cada hora.

El segundo ejemplo agrega nodos recién creados a un nodo "búfer" que no está dentro del alcance del cuerpo, por lo que no se realiza ninguna actualización hasta que coloca el nodo de búfer dentro del alcance del cuerpo. ¡Inténtalo tú mismo!.