Manipulación del DOM con innerHTML e InsertAdjacentHTML

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

Resumen

¿Cómo podemos manipular elementos en el DOM?

El Document Object Model (DOM) es un componente clave en el desarrollo web, permitiendo a los desarrolladores manipular la estructura HTML y el contenido de una página. Aprender a crear y eliminar elementos dinámicamente en el DOM es crucial para construir interfaces de usuario interactivas. Este conocimiento resulta esencial, ya sea que estés desarrollando listas dinámicas, como una lista de compras, o interfaces más complejas. Veamos dos métodos populares para crear y manipular elementos en el DOM.

¿Qué son las HTML strings y cómo se utilizan?

Cuando trabajamos con HTML strings, estamos manejando cadenas de texto que representan estructuras HTML. Estos strings se pueden convertir e insertar en el DOM. Existen dos métodos principales para trabajar con HTML strings: innerHTML y insertAdjacentHTML, cada uno teniendo su propio uso y funcionalidad.

innerHTML: Este método permite generar una cadena de texto HTML e inyectarla directamente en el DOM. Es útil para reemplazar completamente el contenido de un elemento.
```
const areaDeContenido = document.getElementById('content-area');
areaDeContenido.innerHTML = 'Este es un nuevo párrafo.';
```
insertAdjacentHTML: A diferencia de innerHTML, insertAdjacentHTML te permite especificar la posición exacta donde deseas insertar el HTML, sin reemplazar el contenido existente.
```
areaDeContenido.insertAdjacentHTML('beforeend', 'Este es otro párrafo nuevo.');
```

¿Cómo funcionan las posiciones en `insertAdjacentHTML`?

El método insertAdjacentHTML ofrece una flexibilidad única al permitir la inserción de elementos en posiciones específicas. Aquí están las cuatro posiciones disponibles y cómo pueden ser implementadas:

beforebegin: Inserta el HTML justo antes del elemento.
afterbegin: Inserta el HTML al principio del elemento, después de la etiqueta de apertura.
beforeend: Inserta el HTML al final del elemento, justo antes de la etiqueta de cierre.
afterend: Inserta el HTML justo después del elemento.

Estas opciones permiten controlar con precisión dónde se ubica el nuevo contenido.

¿Dónde encontrar información adicional sobre `insertAdjacentHTML`?

Para profundizar en cómo utilizar insertAdjacentHTML eficazmente, se recomienda referirse a la documentación oficial de Mozilla, que proporciona guías detalladas y ejemplos visuales de cómo funcionan las diferentes posiciones.

La documentación de Mozilla es frecuentemente en inglés, ofreciendo la información más precisa y detallada.
Sin embargo, también es posible encontrar traducciones en varios idiomas, incluido el español, para aquellos que inicien en el dominio angloparlante.

Investigar y leer documentos oficiales te capacitará para manipular el DOM con confianza y creatividad.

En conclusión, dominar HTML strings y insertAdjacentHTML es indispensable para cualquier desarrollador que busque generar interfaces web dinámicas y responsivas. Sigue jugando con estas herramientas, consulta documentación e implementa lo aprendido en proyectos reales para consolidar tu conocimiento. ¡Adelante, continúa explorando y aprendiendo en el mundo del desarrollo web!

Andrés Felipe Cubillos Ospina

student•

Natalia Gallego Heras

student•

Cuando la etiqueta de apertura de párrafo estaba en mayúscula al utilizar contentArea.innerHTML, no ocurrió nada malo ni se rompió. Eso es porque HTML (en general) es insensible a las mayúsculas y minúsculas.

Orlando Alonso Gonzales Paz

student•

Les comparto mis apuntes:

// Obtenemos el elemento del DOM con el id "contentArea" y lo almacenamos en la variable 'contentArea'
const contentArea = document.getElementById("contentArea");

// Usamos 'innerHTML' para reemplazar todo el contenido del elemento 'contentArea' con un nuevo párrafo
contentArea.innerHTML = `<p>este es un nuevo parrafo realizado desde js - innerHTML</p>`;

// Insertamos un nuevo párrafo al final del contenido actual de 'contentArea' usando 'insertAdjacentHTML' con "beforeend"
// "beforeend" inserta el contenido justo antes del cierre del elemento, es decir, al final del elemento
contentArea.insertAdjacentHTML("beforeend", `<p>este es un nuevo parrafo realizado desde js - insertAdjacentHTML - beforeend</p>`);

// "beforebegin" inserta el contenido antes de que comience el elemento, es decir, fuera del elemento y justo antes de él (miralo el html desde el navegador, estara fuera de section)
contentArea.insertAdjacentHTML("beforebegin", `<p>este es un nuevo parrafo realizado desde js - insertAdjacentHTML - beforebegin</p>`);

// "afterend" inserta el contenido después del cierre del elemento, es decir, fuera del elemento y justo después de él
contentArea.insertAdjacentHTML("afterend", `<p>este es un nuevo parrafo realizado desde js - insertAdjacentHTML - afterend</p>`);


// "afterbegin" inserta el contenido justo después de que comience el elemento, es decir, al inicio del elemento
contentArea.insertAdjacentHTML("afterbegin", `<p>este es un nuevo parrafo realizado desde js - insertAdjacentHTML - afterbegin</p>`);

@Erick Cruz Sanchez innerHTML reemplaza todo el contenido de un elemento.

insertAdjacentHTML permite agregar contenido HTML en posiciones específicas alrededor de un elemento sin reemplazar su contenido existente.

Miguel Alberto Tarazona Velez

student•

Muy buen resumen, gracias.

Ana Rotela Cabrera

student•

Que excelente resumen

Matias Ezequiel Rivero

student•

innerHTML -> reemplaza todo lo que hay en el elemento por lo que asignemos.

insertAdjacentHTML -> agrega el contenido en cualquiera de las posiciones declaradas disponibles.

*Ambos casos el valor es en formato string con el formato de etiqueta de HTML -> "Nuevo Elemento"

Erick Cruz Sanchez

student•

Diferencias clave:

innerHTML reemplaza todo el contenido de un elemento.

insertAdjacentHTML permite agregar contenido HTML en posiciones específicas alrededor de un elemento sin reemplazar su contenido existente.

Nicolás Mejía Jaramillo

student•

Me salió un error:

Uncaught TypeError: Failed to execute 'insertAdjacentElement' on 'Element': parameter 2 is not of type 'Element'. at <anonymous>:1:13

CHatGpt me surgió lo siguiente: Para insertar un nuevo párrafo con insertAdjacentElement, necesitas crear el elemento HTML en lugar de pasar directamente una cadena de texto. Aquí te muestro cómo puedes hacerlo correctamente:

javascriptCopiar código// Selecciona el área donde quieres insertar el nuevo elemento

let contentArea = document.getElementById("contentArea");

// Crea un nuevo elemento de párrafolet newParagraph =

document.createElement("p");newParagraph.textContent = "Este es otro párrafo nuevo con insert.";

// Inserta el nuevo elemento en la posición deseada

contentArea.insertAdjacentElement("beforeend", newParagraph);

Alejandro Zapata

student•

Parámetros de posición del método insertAdjacentHTML():

"beforebegin" -> Antes del elemento. Solo es válido si el elemento está en el árbol DOM y tiene un elemento padre.

"afterbegin" -> Justo dentro del elemento, antes de su primer elemento secundario.

"beforeend" -> Justo dentro del elemento, después de su último elemento secundario.

"afterend" -> Después del elemento. Solo es válido si el elemento está en el árbol DOM y tiene un elemento padre.

Daniel Andres Rojas Paredes

student•

como me gusta hacerme la vida complicada pense "pero creo que si uso BEM para el css igual y sera mas facil tener todo organizado por clases en el html, ya saben un nombre de clase para cada bloque, entonces me combiene intentar llamar usando el class name a ver que" obviamente no funciono, despues de revisar un poco el codigo y que verificara que efectivamente el "error" era por ese cambio de id a classname, le hice la pregunta adecuada a chat gpt y me dio la respuesta adecuada: • Selecciona todos los elementos que tienen la clase especificada.

• Retorna una colección HTML (un array-like) de elementos.

• Como retorna múltiples elementos, necesitas iterar sobre la colección para modificar el innerHTML de cada uno.

¿alguno tiene sugerencias para que el codigo sea escalable apesar de esto,? es decir que pasa si con el tiempo (aunque no se que tan posible sea) estas colecciones se hacen mas y mas numerosas, como iterar para que esto no sea un problema a la hora de insertar siempre en el mismo punto el texto.....? bueno tal vez deberia ver el resto de la clase :v

Fran Narbona

student•

Daniel qué tal ? Te aconsejo que de momento no te compliques, con la práctica acabarás encontrando el modo más práctico de hacer las cosas. Y de hecho, no hay un solo camino para hacerlo. Está bien que te preguntes cosas, pero sigue avanzando en el curso y luego practica, con la práctica y cursos más avanzados vas a ver que cada profesor o desarrollador tiene un método y todos son válidos. Ve creando tu propio estilo y perfeccionándolo con la documentación. Pero en este nivel básico céntrate en poner en práctica todo, más que en querer buscar el modo perfecto de hacerlo. Espero haberte ayudado.

Kevin Sierra

student••

Inicialmente, el único parrafo que tenia era el del centro "Este es un nuevo parrafo". Este parrafo estaba envuelto por un footer. Aplicanto ``` insertAdjacentHTML ``` con sus diferentes posiciones resulto en la siguiente imagen:

Luego use innerHTML para modificar el contenido del footer:

Eliminando todo su contenido y dejando sólo lo último que agregé.

No conocia esta propiedad, muy interesante para agregar elementos sin modificar los existentes

Andrés Castillo

student•

A mi me sale un error al usar insertAdjacentHTML, porque me dice que el segundo parámetro debe ser de tipo Element. Lo estoy haciendo tal cual el profe lo hace. ¿Por que sucede esto?

SARA ACUÑA BENAVIDES

student•

Diferencias clave:

✅ innerHTML reemplaza todo el contenido de un elemento. ✅ insertAdjacentHTML añade contenido en una posición específica sin borrar lo que ya hay.

Jeronimo Murillo Narvaez

student•

Hay que tener cuidado con Insertar contenido dado por un usuario o cualquier recurso no confiable con innerHTML. Los atacadores pueden utilizar la etiqueta <script> para insertar y correr código malicioso en la aplicación

https://medium.com/@sparklewebhelp/understanding-the-risks-of-using-inner-html-in-web-development-30d4fa67f815#:~:text=One%20of%20the%20primary%20security,pages%20viewed%20by%20other%20users.

Matias Ezequiel Rivero

student•

Los casos de uso van a ir surgiendo a partir de que encontremos situaciones donde aplicarlo, y van aparecer. Algunos ejemplos:

Los principales casos de uso para seleccionar hijos desde los padres y padres desde los hijos en HTML están relacionados con la manipulación del DOM. Casos más comunes:

Seleccionar hijos desde los padres:

Iterar sobre elementos secundarios Útil para aplicar estilos, agregar eventos o modificar contenido de forma individual a cada hijo.
- Ejemplo: Obtener todos los <li> de un <ul>.
Validación o filtrado de hijos específicos Buscar elementos con ciertas características dentro de un contenedor.
- Ejemplo: Buscar un hijo con una clase o ID específica en un formulario.
Manipulación masiva del contenido Cambiar texto, atributos o clases de los hijos de un contenedor.
- Ejemplo: Cambiar el texto de todos los botones dentro de un <div>.
Añadir eventos a múltiples elementos Agregar eventos a los hijos de un contenedor para evitar repetición de código.
- Ejemplo: Asignar un evento click a todas las celdas de una tabla.

Kyb3r Cipher

student•

No conocia este method, muy util gracias

Manauri Brazoban

student•

insertAdjacentHTML es un método bastante utilizado en JavaScript para manipular el DOM, ya que permite insertar contenido HTML en una posición específica de un elemento sin reemplazar el contenido existente. Esto es útil para actualizar dinámicamente la interfaz de usuario en aplicaciones web. Su flexibilidad permite añadir elementos al principio, al final o alrededor de otros elementos, lo que lo hace más versátil que innerHTML, que reemplaza todo el contenido. Es esencial para crear experiencias interactivas en páginas web.

marco contreras

student•

es normal que al agregar un elemento con insertAdjacentHtml no le coloque la etiqueta lo psue entrecomillas y lo pesca como una parrafo igual.

pro error no le agregue la etiqueta y se guardo igual como un parrafo xD

marco contreras

student•

me respondo yo mismo no me agrego como un parrafo xD la agrego a secas nomas jaja

Diego Restrepo-Leal

student•

contentArea.insertAdjacentHTML('beforeEnd', 'Este es otro párrafo nuevo.');

Santiago Perozo

student•

Cuando he hecho proyectos de frontend y he usado estas propiedades siempre me ha resultado mejor usar template strings en vez de comillas simples o dobles, ya que son multilínea y no hace falta concatenar, además con las comillas normales hay veces que hay usar caracteres de escape con una barra invertida, con los template strings nos ahorramos todo eso y es mas legible.

Carlos Hernandez

student•

Manipulación del DOM con innerHTML e InsertAdjacentHTML

¿Cómo podemos manipular elementos en el DOM?

¿Qué son las HTML strings y cómo se utilizan?

¿Cómo funcionan las posiciones en insertAdjacentHTML?

¿Dónde encontrar información adicional sobre insertAdjacentHTML?

¿Cómo funcionan las posiciones en `insertAdjacentHTML`?

¿Dónde encontrar información adicional sobre `insertAdjacentHTML`?