Agregar elementos HTML sin reemplazar contenido existente

Clase 11 de 27 • Curso de JavaScript: Manipulación del DOM

Resumen

¿Cómo se puede agregar un nuevo elemento a una lista sin reemplazar el contenido existente?

El uso de innerHTML para modificar dinámicamente el contenido de una página web es común, pero a veces puede presentar desafíos si no se gestiona adecuadamente el rendimiento. Aquí te explicamos cómo agregar elementos HTML a una lista existente sin reemplazar los elementos ya presentes.

¿Qué problemas podrías enfrentar usando innerHTML?

La transformación de contenido utilizando innerHTML podría parecer una solución sencilla y directa. Sin embargo, esto implica algunos compromisos en cuanto a rendimiento:

Al usar innerHTML en conjunto con el operador +=, se concatena el nuevo contenido HTML a lo que ya existe. No obstante, esto provoca que se re-renderice todo el documento dentro del contenedor.
Este enfoque es aceptable con una cantidad limitada de elementos, pero si estás tratando con miles o millones de elementos, el impacto en el rendimiento puede ser considerable, ya que cada modificación obligará a re-renderizar todo el contenido.

¿Cómo evitar problemas de rendimiento al agregar elementos?

Para agregar elementos sin reemplazar el contenido existente y sin comprometer el rendimiento de la página, se recomienda el uso de insertAdjacentHTML. Este método permite insertar nuevo contenido de HTML en una posición específica dentro de la lista, evitando así el proceso de re-renderizado completo.

Aquí te detallamos cómo hacerlo:

// Selecciona el contenedor padre por su ID
const listArea = document.getElementById('listArea');

// Agrega un nuevo elemento de lista sin causar un re-renderizado completo
listArea.insertAdjacentHTML('beforeend', '<li>Item número 6</li>');

¿Cuál es la ventaja de usar insertAdjacentHTML?

La principal ventaja de insertAdjacentHTML es su capacidad para insertar contenido HTML en posiciones específicas (como antes o después de otros elementos, o dentro del primer o último hijo) sin forzar el redibujado de toda la lista.

Al usar insertAdjacentHTML, puedes especificar posiciones como:

beforebegin: antes del elemento actual.
afterbegin: justo dentro del elemento actual, antes del primer hijo.
beforeend: justo dentro del elemento actual, después del último hijo.
afterend: después del elemento actual.

En el ejemplo proporcionado, al usar beforeend, se asegura de que el nuevo elemento se añade al final de la lista ya existente, manteniendo todos los elementos previos intactos.

Conclusión

Al manipular el DOM para agregar nuevos elementos en una lista, es crucial considerar técnicas que minimicen el impacto en el rendimiento y eviten innecesarios re-renderizados completos de los elementos. Métodos como insertAdjacentHTML facilitan operaciones eficientes y contribuyen a la optimización del desempeño de una aplicación web, garantizando así una mejor experiencia para el usuario final. ¿Te animas a probarlo en tus propios proyectos?

Orlando Alonso Gonzales Paz

student•

Apuntes mis kings y queens

// Al usar 'innerHTML +=', estamos agregando un nuevo elemento a la lista. 
// Sin embargo, 'innerHTML' vuelve a renderizar todo el contenido existente del elemento, 
// incluido el padre (es decir, toda la lista), lo que puede resultar en un mayor consumo de recursos.
const listArea = document.getElementById(`listArea`);
listArea.innerHTML += `<li>Item 5 - js innerHTML</li>`;

// Al utilizar 'insertAdjacentHTML', se optimiza la inserción del nuevo elemento. 
// Este método únicamente renderiza el nuevo elemento que se agrega al documento 
// (en este caso, el <li>), sin necesidad de re-renderizar todo el contenido existente de la lista.
// "beforeend" inserta el nuevo <li> al final de la lista, justo antes del cierre de la etiqueta <ul> o <ol>.
listArea.insertAdjacentHTML(`beforeend`, `<li>Item 6 - js insertAdjacentHTML</li>`);

Joaquin Pinto

student•

aguante insertAdjacent no más!!!

Santiago Perozo

student•

En resumen, mejor usar insertAdjacentHTML en vez de innerHTML a la hora de agregar elementos sin afectar al resto.

Lorenzo De La Torre

student•

buen día, será para no esforzar o consumir recursos en la navegación, así será mas rápido cuando se use el insertAdjacentHTML

Jose Luis Bedoya

student•

muy interesante! lo utilizaré en mi trabajo!

Platzi Team

student•

Con este curso estoy entendiendo y comprendiendo mucho mas la interacción entre javascript y HTML :D

Ysabella Navas

student•

🥇 ¿Qué es innerHTML?

innerHTML reemplaza TODO el contenido HTML dentro de un elemento.

🔹 Pros:

Rápido de escribir.
Perfecto para limpiar y meter contenido desde cero.

🔹 Contras:

⚠️ Destruye todo lo que había antes: si tenías eventos agregados con JS, bye bye.
⚠️ Puede ser inseguro si metes código de usuario directamente → riesgo de XSS.

🌟 ¿Qué es insertAdjacentHTML?

Este método te deja insertar contenido sin borrar lo que ya hay, en lugares específicos:

🧭 Las posiciones posibles:

'beforebegin' → Antes del elemento.
'afterbegin' → Al principio del elemento.
'beforeend' → Al final del elemento.
'afterend' → Después del elemento.

🔹 Pros:

No destruye el DOM existente (ni eventos ni estructuras).
Ideal para agregar elementos sin tocar lo demás.
Es más performante cuando agregas muchos nodos.

🔹 Contras:

Un poco más verboso que innerHTML.

Ciro de Jesus Arrieta Lacouture

student•

innerHTML es ideal cuando necesitas reemplazar todo el contenido de un elemento con nuevo HTML, pero debes tener cuidado si solo deseas agregar contenido sin perder lo existente.
insertAdjacentHTML() es una opción más flexible y eficiente cuando quieres agregar contenido HTML en posiciones específicas sin reemplazar todo el contenido.

Diego Colín

student•

🔹 innerHTML

Reemplaza completamente el contenido dentro de un elemento.
Se puede usar para insertar o actualizar múltiples elementos a la vez.

Pasos:

Identifica el contenedor donde quieres insertar el HTML.
Selecciona el elemento usando getElementById o querySelector.
Asigna la nueva cadena de HTML:jsxCopyEditcontainer.innerHTML = "<p>Este es un párrafo</p>";

⚠️ Advertencia: Sobrescribe el contenido existente y puede representar un riesgo de seguridad si insertas contenido generado por usuarios (vulnerabilidad XSS). Existe una forma de evitar reemplazar contenido, pero es mala para el rendimiento.

🔹 insertAdjacentHTML

Agrega nuevo HTML sin reemplazar el contenido existente.
Permite controlar dónde se inserta el nuevo elemento.

Pasos:

Identifica el contenedor objetivo.
Selecciónalo usando getElementById o querySelector.
Usa insertAdjacentHTML(position, htmlString):jsxCopyEditcontainer.insertAdjacentHTML("beforeend", "<p>Este es otro nuevo párrafo</p>");

Posiciones disponibles:

"beforebegin" → Antes del propio elemento.
"afterbegin" → Dentro del elemento, antes del primer hijo.
"beforeend" → Dentro del elemento, después del último hijo. ✅ (Más común)
"afterend" → Después del propio elemento.

Bryan Castano

student•

VVayah, esta clase si que estuvo Facinante, innerHTML vs insertAdjacentHMTL, ahora les comprendo como modificar el DOM Renderizando en my Navegador web dese JS, y se me ocurren muchas cosas por hacer con ello, por ahora Yo estoy utilizando JS Vanilla, y es bueno comprender JS puro sin Frmwrks yet para tener buenas bases solidas. Pronto tomare los cursos de React y eso sera otro mundo asombroso de sorpresas y novedades que me serviran mucho para realizar par projectos web que tengo pendientes.

Calvin Rafael Bobadilla Fernandez

student•

Me quedo con insert, pero es bueno saberlo de todas formas.

Manuel Felipe Acuña

student•

Me gustaria dar un apune para esta clase : InsertAdyasentHTML tiene sus beneficios comparandolo con INNERHTML el cual es que**** nos permite elegir la ubicacion de la nueva etiqueta que estamos creando, sin embargo, no podemos adicionar clases o ids, lo que la vueleve complicada para seleccionar, editar o eliminar tanto en HTML como en CSS con el dom .Por lo que a largo plazo no es factible utilizarla,En mi concepto la mejor de todas es CREATEELEMENT.

PDTA: Si estoy equivocado por favor dame tu punto de vista y ayudame a mejorar

Any Omaña

student•

Por acá les dejo mi resumen en código de esta clase <3

/* MANIPULACIÓN DEL DOM SEGÚN EL COMPORTAMIENTO DEL USUARIO */

const contentArea = document.getElementById("contentArea");
console.log(contentArea);

//Inyecta el string indicado en el elemento seleccionado
//contentArea.innerHTML = "<p>Epale, soy una cadena de texto</p>";

//Inyecta el string donde yo quiera
contentArea.insertAdjacentHTML("afterend", "<p>Epale, soy una cadena de texto</p>");

//Agregar nuevos elementos sin modificar contenido existente
const listArea = document.getElementById("listArea");
console.log(listArea);

//Agrega nuevo contenido sin reemplazar el anterior. Sin embargo afecta al performance de la página porque rendereiza todo el contenedor padre otra vez
//listArea.innerHTML += "<li>Hello, i'm Any <3</li>";

//No afecta al performance, por lo cual es la mejor manera para agregar un elemento nuevo
listArea.insertAdjacentHTML("beforeend", "<li>Soy un nuevo elemento</li>");

Ysabella Navas

student•

Cuando usar cada uno.

Erick Cruz Sanchez

student•

Apuntes:

Usar InnerHTML += <li>Agregando Elemento</li>, renderiza todos los elementos, incluyendo al padre donde se encuentra. Lo que hace que haya un consumo más grande de recursos.

Al utilizar insertAdjacentHTML, lo que hace es renderizar el elemento o elementos que únicamente se agregaron a la lista o a nuestro documento.