Etiquetas JavaScrip insertAdjacentHTML y beforeend

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.

Comentarios

Sin comentarios
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario:
Nuestra página web utiliza cookies propias y de terceros, para realizar el análisis de la navegación de los usuarios y así poder mejorar nuestros servicios. Si continúas navegando, consideramos que aceptas su uso. Puedes cambiar la configuración u obtener más información aquí