Modificar el contenido y la estructura del DOM es una tarea común cuando se crean aplicaciones web interactivas. Ya sea que necesitemos cambiar el texto de un elemento, añadir nuevos elementos o reorganizar los existentes, JavaScript provee una variedad de métodos y técnicas para hacerlo.

Modificación de Contenido

Para cambiar el contenido de un elemento del DOM, podemos usar las propiedades innerText, innerHTML y textContent.

innerText

Modifica el texto visible dentro de un elemento. Solo incluye el texto que se renderiza en pantalla.

javascript

innerHTML

Permite modificar el contenido HTML dentro de un elemento. Este método puede insertar contenido HTML dinámico.

javascript

textContent

Similar a innerText, pero incluye todo el texto en el árbol, incluso texto oculto por CSS.

javascript

[Placeholder: Imagen de un elemento HTML antes y después de modificar su contenido con innerText y innerHTML.]

Inserción de Elementos

Podemos insertar nuevos elementos en el DOM utilizando métodos como appendChild, insertBefore y innerHTML.

appendChild

Añade un nuevo nodo como el último hijo de un elemento.

javascript

insertBefore

Añade un nuevo nodo antes de un nodo existente.

javascript

Eliminación de Elementos

Podemos eliminar elementos del DOM utilizando métodos como removeChild y remove.

removeChild

Elimina un hijo específico de un elemento.

javascript

remove

Elimina el elemento en sí mismo del DOM.

javascript

Reemplazo de Elementos

Podemos reemplazar un elemento existente con uno nuevo utilizando replaceChild.

javascript

Clonación de Elementos

Podemos clonar un nodo existente y sus descendientes utilizando cloneNode.

javascript

Ejemplo Completo

El siguiente ejemplo muestra cómo insertar, eliminar y modificar elementos en el DOM:

html

Conclusión

La habilidad de modificar el contenido y la estructura del DOM nos permite crear aplicaciones web dinámicas y ricas en interactividad. En los próximos capítulos, exploraremos cómo manejar eventos y hacer interacciones aún más dinámicas y receptivas.