CodeAventura
JavaScript en el DOM
▸Recorrido y manipulación▸Manipular childs

Misión

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Childs del DOM</title>
  </head>
  <body>
    <ul id="tareas">
      <li>Estudiar DOM</li>
      <li>Practicar selectores</li>
      <li>Construir un mini proyecto</li>
    </ul>

    <script src="script.js"></script>
  </body>
</html>
●localhost:5173
05 / 16Manipular childs
Anterior

Manipular childs

Del DOM estático al DOM dinámico

Hasta ahora solo leíamos nodos. Aquí damos el salto: crear, insertar y eliminar hijos.

Cuando haces esto, la interfaz cambia sin recargar la página. Eso es el núcleo de apps como listas de tareas, carritos de compra o feeds de contenido.

Paso 1: Crear un nodo

Esto crea el elemento en memoria, pero todavía no aparece en la página. Antes de insertarlo, puedes prepararle el contenido:

Paso 2: Insertarlo en el DOM

append

Inserta el elemento al final del contenedor:

append es moderno y versátil: acepta tanto nodos como strings de texto.

appendChild

Hace lo mismo pero es más antiguo. Solo acepta nodos (no strings):

En la práctica, usa append. Es más flexible y su sintaxis es más limpia.

Paso 3: Eliminar un hijo

Con remove()

El método más directo: se llama sobre el elemento que quieres eliminar:

Si no estás seguro de que exista ese hijo, puedes usar optional chaining para evitar errores:

Con removeChild()

Más antiguo. Lo llamas desde el padre pasándole el hijo a eliminar:

En la práctica, usa .remove() directamente: es más conciso.

Flujo completo

Criterio práctico

No manipules el DOM dentro de bucles gigantes sin necesidad. Construye siempre en este orden:

  1. crear nodo
  2. preparar contenido y atributos
  3. insertarlo

Este patrón evita errores y hace el código legible y predecible.

Tu desafío 🚀

  1. Selecciona #tareas
  2. Crea un nuevo <li> con texto
  3. Insértalo en la lista con append
  4. Elimina al menos un hijo existente con .remove()

El DOM se vuelve tuyo cuando dejas de observarlo y empiezas a transformarlo.