Buenas prácticas al manipular controles HTML a través de Javascript

¿Cuál es una buena forma de manipular controles HTML?

Al crear un elemento HTML?

var select = document.getElementById("MyList"); var options = ["1", "2", "3", "4", "5"]; for (var i = 0; i < options.length; i++) { var opt = options[i]; var el = document.createElement("option"); el.Text = opt; el.value = opt; el.innerHTML = opt; select.appendChild(el); } 

O manipulando HTML:

  var options = new Array(2); options [0] = '1'; options [1] = '2'; options [0] = '<option>' + options [0] + '</option>'; options [1] = '<option>' + options [1] + '</option>'; var newHTML = '<select>' + options [0] + options [1] + '</select>'; selectList.innerHTML = newHTML; 

¿Cuál de estos es una buena práctica? ¿Se prefiere uno sobre otro en condiciones específicas?

Siempre primer acercamiento. si está utilizando el estilo innerhtml, el browser se está creando a sí mismo.

El primer enfoque parece más modular y reutilizable. Puede poner las líneas dentro de for en un método y llamar a ese método.

El primer método es mejor que el segundo, es decir,

** Crear un elemento HTML es mejor que manipular el DOM "

La razón: estar trabajando con DOM puede provocar el reflujo del browser.

Por ejemplo: supongamos que necesita replace un elemento al DOM que ya existe.

Usando el enfoque:

  1. Crear un elemento DOM : crea un elemento. Añádele attributes verídicos y reemplázalos. El elemento se agregará de una sola vez y solo habrá un reflujo del documento .

  2. Manipulación de DOM : debe agregar y eliminar attributes o elementos uno por uno. Esto puede hacer que el browser active un reflujo para todos los elementos y attributes que se manipulan. Esto requerirá resources valiosos para procesar el flujo del documento a medida que se manipulan los elementos .

Entonces, crear un elemento dom es mucho más sencillo ya que su browser no tendrá que volver a procesar el flujo del documento.

* EDITAR: * Si necesita insert muchos elementos, el mejor enfoque es crear un Fragmento de documento . El fragment del documento está en memory y no es parte del tree DOM. Por lo tanto, agregarle elementos NO provoca reflujos. Como dice la documentation:

Dado que el fragment de documento está en la memory y no es parte del tree DOM principal, agregar hijos a él no causa el reflujo de la página (cálculo de la position y geometry del elemento). En consecuencia, el uso de fragments de documentos a menudo da como resultado un mejor performance.