Agregar contenido dinámico a una página web sin destruir lo que ya existe es una necesidad frecuente en el desarrollo frontend. Sin embargo, la forma en que lo hagas puede tener un impacto directo en el rendimiento de tu aplicación. Conocer la diferencia entre innerHTML con concatenación e insertAdjacentHTML te permitirá tomar mejores decisiones al manipular el DOM.
¿Cómo agregar elementos con innerHTML sin reemplazar el contenido existente?
Cuando usas innerHTML de forma directa, el contenido previo se reemplaza por completo. Sin embargo, existe una forma de concatenar nuevo HTML al contenido que ya existe: utilizar el operador += [01:10].
El proceso es sencillo:
- Seleccionar el contenedor padre con
document.getElementById.
- Usar
.innerHTML += seguido del string HTML que quieres agregar.
- El nuevo elemento se añade al final sin eliminar los anteriores.
javascript
const listarea = document.getElementById('listarea');
listarea.innerHTML += '<li>Item número cinco</li>';
Al ejecutar esto, la lista pasa de cuatro a cinco elementos. Parece funcionar perfectamente, pero hay un problema de rendimiento importante que debes considerar.
¿Por qué innerHTML con concatenación afecta el performance?
Al utilizar innerHTML +=, el navegador no simplemente agrega el nuevo elemento. Lo que realmente sucede es que renderiza todo el contenido del contenedor padre desde cero [02:28]. Esto incluye todos los elementos hijos que ya existían, incluso si no sufrieron ningún cambio.
Cuando tienes cuatro elementos, el impacto es mínimo. Pero imagina un escenario con un millón de elementos donde necesitas agregar otros miles más. Cada vez que uses esta técnica, el navegador tendrá que re-renderizar todo el contenido existente antes de añadir los nuevos, lo que degradará significativamente el rendimiento de tu página [03:02].
¿Qué es insertAdjacentHTML y por qué es más eficiente?
La alternativa recomendada es el método insertAdjacentHTML [03:24]. Este método permite insertar HTML en una posición específica sin afectar el resto del DOM.
javascript
listarea.insertAdjacentHTML('beforeend', '<li>Item número seis</li>');
El primer parámetro define la posición de inserción. En este caso, beforeend indica que el nuevo elemento se colocará justo antes del cierre del contenedor padre, es decir, al final de la lista.
¿Cuál es la diferencia visible entre ambos métodos?
La diferencia se puede observar directamente en el inspector del navegador:
- Con
innerHTML +=: todos los elementos del contenedor se iluminan, indicando que fueron re-renderizados por completo [02:15].
- Con
insertAdjacentHTML: solo el nuevo elemento aparece resaltado, el resto del contenido permanece intacto [03:54].
Esto demuestra que insertAdjacentHTML agrega el elemento de forma quirúrgica, sin tocar ni resetear el contenido existente.
¿Cuándo usar cada método para manipular el DOM?
Ambos métodos tienen su lugar, pero la regla general es clara:
- Usa
innerHTML cuando necesites reemplazar completamente el contenido de un elemento.
- Usa
innerHTML += solo en casos con muy pocos elementos donde el rendimiento no sea crítico.
- Usa
insertAdjacentHTML siempre que necesites agregar contenido nuevo sin afectar lo existente, especialmente en listas o contenedores con muchos nodos.
El concepto de re-renderizado del DOM es fundamental para entender por qué ciertas operaciones son costosas. Cada vez que el navegador reconstruye una sección del árbol DOM, consume recursos de procesamiento que, acumulados en aplicaciones grandes, pueden hacer que la experiencia del usuario se vuelva lenta.
Si quieres construir interfaces rápidas y eficientes, elegir el método correcto para la manipulación del DOM marca una gran diferencia. ¿Has notado problemas de rendimiento en tus proyectos al agregar elementos dinámicamente?
