- o
- Item 6 - js insertAdjacentHTML `); ```
- .
listArea.insertAdjacentHTML(`beforeend`, `
Entendiendo el DOM
Manipulación del DOM con JavaScript y APIs
Entendiendo el DOM y su Manipulación con JavaScript
Diferencias entre el DOM y el objeto Window en JavaScript
Seleccionando y Accesando a Elementos del DOM
Selección de Elementos del DOM con JavaScript
Navegación Jerárquica del DOM en JavaScript
Manipulando Elementos del DOM
Atributos y Propiedades en HTML y su Manipulación con JavaScript
Modificar texto en HTML con JavaScript
Modificar Estilos CSS con JavaScript: Propiedad Style y ClassName
Uso de classList para Manipular Clases en Elementos HTML
Manipulación del DOM con innerHTML e InsertAdjacentHTML
Agregar elementos HTML sin reemplazar contenido existente
Creación y Manipulación de Elementos DOM con createElement
Eliminar Elementos del DOM con JavaScript: Métodos y Ejemplos
Clonación y Reemplazo de Elementos en JavaScript
Manipulando Eventos en el DOM
Eventos y Flujo en Programación Web: Capturing y Bubbling
Manejo de Eventos en JavaScript: click, mouseOver y mouseOut
Manipulación de Eventos en JavaScript para Interacción de Elementos
Validación de Formularios con JavaScript: Prevenir Comportamiento por Defecto
Delegation Pattern en JavaScript: Mejora de Eventos Click en Listas
Creando un Administrador de Tareas
Creación de un Task Manager con Persistencia usando Local Storage
Interactividad en Botones de Tareas: Borrar y Editar en JavaScript
Persistencia de Datos con Local Storage en Tareas Web
Guardado y edición de tareas en local storage con JavaScript
Manejo de Errores en Local Storage para Tareas Dinámicas
Cambio de Tema Dinámico y Persistente en Aplicaciones Web
Creación de Páginas Web Dinámicas con JavaScript
Asincronía en JavaScript
Programación Síncrona y Asíncrona en JavaScript
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Agregar elementos HTML sin reemplazar contenido existente
11/27Recursos
¿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
innerHTMLen 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?
Aportes 12
Preguntas 0
Ordenar por:
Apuntes mis kings y queens
```js
// 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 += `Item 5 - js innerHTML `;
// 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 ), sin necesidad de re-renderizar todo el contenido existente de la lista.
// "beforeend" inserta el nuevo al final de la lista, justo antes del cierre de la etiqueta
aguante insertAdjacent no más!!!
En resumen, mejor usar insertAdjacentHTML en vez de innerHTML a la hora de agregar elementos sin afectar al resto.
Con este curso estoy entendiendo y comprendiendo mucho mas la interacción entre javascript y HTML :D
muy interesante! lo utilizaré en mi trabajo!
* `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.
### **🔹** `innerHTML`
* Reemplaza completamente el contenido dentro de un elemento.
* Se puede usar para insertar o actualizar múltiples elementos a la vez.
**Pasos:**
1. Identifica el contenedor donde quieres insertar el HTML.
2. Selecciona el elemento usando [`getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) o [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector).
3. Asigna la nueva cadena de HTML:jsxCopyEdit`container.innerHTML = "
Este es un párrafo
"`; **⚠️ 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:** 1. Identifica el contenedor objetivo. 2. Selecciónalo usando [`getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) o [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector). 3. Usa `insertAdjacentHTML(position, htmlString)`:jsxCopyEdit`container.insertAdjacentHTML("beforeend", "Este es otro nuevo párrafo
"`); **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.
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.
Me quedo con insert, pero es bueno saberlo de todas formas.
### 🥇 ¿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`.
Cuando usar cada uno.
**Apuntes:**
Usar InnerHTML += \Agregando Elemento\ , 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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?