Etiquetas JavaScrip insertAdjacentHTML y beforeend

Partimos de una premisa, el DOM (estructura de objetos que genera el navegador al cargar un documento HTML) es lento. Y añadimos otra, es manipulable con JavaScript.

A medida que construimos sitios cada vez más dinámicos, basados en Ajax, debemos encontrar la manera de modificar el DOM intentando crear el menor impacto en el rendimiento posible. Una manera de hacerlo es insertar elementos HTML dentro de otros de nivel superior, sin que afecten a los demás elementos que forman parte del conjunto. Para esto utilizaremos insertAdjacentHTML.

El código JavaScript

Si tienes parte de un código HTML en formato de cadena, por ejemplo como repuesta a una petición Ajax, la manera habitual de añadir estos elementos a otro de nivel superior es a través de innerHTML:

function  onSuccess ( newHtml )  {
   parentNode . innerHTML + = newHtml ; 
}

El problema con esto es que cualquier referencia a elementos secundarios o eventos conectados a ellos se pierden debido a la configuración de la innerHTML, incluso si sólo estás añadiendo más HTML.
insertAdjacentHTML y beforeend resuelven este problema:

function  onSuccess ( newHtml )  {
   parentList . insertAdjacentHTML ( 'beforeend' , newHtml ) ;
}

Con el ejemplo de código anterior, la cadena HTML se añade a la de los de nivel superior sin que afecte a otros elementos bajo el mismo nivel superior. Es una ingeniosa manera de introducir HTML en un nodo padre sin la molestia de añadir HTML o la creación temporal de un nodo padre y después colocar ahí el código HTML dependiente.