JavaScript: document.createNode o plain html?

Question

¿Es mejor utilizar

document.createNode(); 

o texto plano como

var foo = '<div> bar </div>'; 

para crear el formato HTML con Javascript?

Answer 1

No hay "mejor" en este caso particular, se reducirá a lo que se mantiene más fácilmente. y preferencia del programador.

En algunos navegadores, usar DOM para crear elementos y nodos es, en términos de rendimiento, más rápido que otros. Algunos agentes de usuario procesan las cadenas de forma más rápida, por ejemplo configurando la propiedad innerHTML.

Personalmente prefiero usar objetos DOM siempre, pero utilizo el framework mootools que se presta a este enfoque. jQuery fomenta la creación basada en cadenas.

Salida este punto de referencia: http://jsperf.com/string-vs-createelement/3, sino también en cuenta estos artículos: http://www.quirksmode.org/dom/innerhtml_old.html y http://karma.nucleuscms.org/item/101

Answer 2

Es mejor utilizar las funciones del nodo DOM. Si desea crearlo usando una cadena, mire en jQuery, ya que tiene formas de analizarlo correctamente en los nodos DOM por usted.

var foo = $('<div> bar </div>'); 

Answer 3

Uso de las funciones de manipulación de DOM puede tener una referencia a los elementos creados, uno por uno, y será más fácil de modificar el código más adelante, por ejemplo, modificar el orden de los árboles, agregar o eliminar un elemento, y también para fines de depuración.

Dicho esto, algunas veces experimenté que las funciones de manipulación DOM no son las mejores.

Por ejemplo tuve la necesidad de modificar en tiempo real el contenido de una etiqueta de estilo para controlar el estilo de los elementos directamente a través de reglas de texto CSS, algo que no se puede lograr en todos los navegadores usando los diversos objetos de estilo JS. porque contienen propiedades de solo lectura.

En este caso, la etiqueta de estilo html era de solo lectura para IE (o al menos IE no deseaba modificarla a través de innerHtml o similar), la única solución que encontré fue leer el antiguo valor html, cambiarlo , elimine el elemento y cree un nuevo elemento de etiqueta de estilo con el nuevo html escrito directamente en la cadena al crear el elemento.

Dicho esto, iría con las funciones del nodo DOM siempre que sea posible.