Tema 18 · DOM y Eventos

Creación y Eliminación Dinámica de Nodos

Aprende a construir interfaces dinámicas creando elementos en memoria con createElement, insertándolos con appendChild/prepend y eliminándolos con remove().

Eventos e Interactividad (addEventListener) Temporizadores: setTimeout y setInterval

Creación de Nodos en Memoria

En lugar de reconstruir cadenas de texto HTML masivas con innerHTML (lo cual puede resetear eventos de elementos existentes), el navegador provee métodos de creación limpia y segura de nodos. 

// 1. Crear el elemento en memoria (aún no visible en la página)
const nuevoItem = document.createElement("li");

// 2. Asignar clases, atributos y contenido
nuevoItem.className = "tarea-pendiente";
nuevoItem.textContent = "Aprender asincronía en JS";

// 3. Insertarlo dentro de un contenedor padre existente
const lista = document.getElementById("mis-tareas");
lista.appendChild(nuevoItem);

Métodos de Inserción y Posicionamiento

Método Ubicación de Inserción
padre.appendChild(hijo) Inserta el nodo al final de la lista de hijos del elemento padre.
padre.prepend(hijo) Inserta el nodo al principio de la lista de hijos del elemento padre.
elemento.before(nuevoNodo) Inserta el nuevo nodo inmediatamente antes del elemento de referencia.
elemento.after(nuevoNodo) Inserta el nuevo nodo inmediatamente después del elemento de referencia.

Eliminación de Nodos con .remove()

Para quitar cualquier elemento de la página, simplemente se invoca su método remove(): 

const elementoParaBorrar = document.querySelector(".alerta-temporal");
if (elementoParaBorrar) {
  elementoParaBorrar.remove(); // Desaparece del DOM de forma inmediata
}

⚡ Gestor Dinámico de Tareas con Inserción y Eliminación

Crea nuevos elementos en el DOM con createElement y elimínalos individualmente con remove():

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Crear y Eliminar Nodos del DOM</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-tareas { max-width: 520px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    .input-fila { display: flex; gap: 8px; margin-bottom: 15px; }
    input[type="text"] { flex: 1; padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 6px; }
    button.btn-add { background: #0284c7; color: white; border: none; padding: 9px 16px; border-radius: 6px; cursor: pointer; font-weight: bold; }
    button.btn-add:hover { background: #0369a1; }
    ul { list-style: none; padding: 0; margin: 0; }
    li.tarea-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; margin-bottom: 8px; transition: all 0.2s; }
    li.tarea-item:hover { background: #f1f5f9; border-color: #cbd5e1; }
    .btn-borrar { background: #fee2e2; color: #dc2626; border: 1px solid #fca5a5; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 0.8rem; }
    .btn-borrar:hover { background: #ef4444; color: white; }
    .contador-info { font-size: 0.85rem; color: #64748b; margin-top: 10px; }
  </style>
</head>
<body>

  <div class="card-tareas">
    <h3 style="margin-top: 0; color: #0f172a;">Lista Interactiva de Tareas</h3>

    <div class="input-fila">
      <input type="text" id="campo-tarea" placeholder="Escribe una nueva tarea...">
      <button class="btn-add" onclick="agregarTarea(false)">+ Al Final</button>
      <button class="btn-add" style="background: #0d9488;" onclick="agregarTarea(true)">+ Al Inicio</button>
    </div>

    <ul id="lista-tareas"></ul>
    <div class="contador-info" id="info-contador">0 tareas registradas</div>
  </div>

  <script>
    let contadorId = 0;

    function actualizarContador() {
      const cantidad = document.querySelectorAll('#lista-tareas li').length;
      document.getElementById('info-contador').textContent = `${cantidad} tareas registradas`;
    }

    function agregarTarea(alInicio) {
      const input = document.getElementById('campo-tarea');
      const texto = input.value.trim();

      if (texto === "") {
        alert("Escribe una descripción para la tarea.");
        return;
      }

      contadorId++;

      // 1. createElement para crear el nodo <li>
      const li = document.createElement('li');
      li.className = 'tarea-item';

      // 2. createElement para el span con el texto
      const span = document.createElement('span');
      span.textContent = `#${contadorId} · ${texto}`;

      // 3. createElement para el botón de eliminar
      const btnEliminar = document.createElement('button');
      btnEliminar.className = 'btn-borrar';
      btnEliminar.textContent = '✕ Eliminar';

      // Evento para eliminar el nodo con .remove()
      btnEliminar.addEventListener('click', function() {
        li.remove();
        actualizarContador();
      });

      // Ensamblar los elementos hijos
      li.appendChild(span);
      li.appendChild(btnEliminar);

      // 4. Inserción condicional al inicio (prepend) o al final (appendChild)
      const lista = document.getElementById('lista-tareas');
      if (alInicio) {
        lista.prepend(li);
      } else {
        lista.appendChild(li);
      }

      input.value = "";
      input.focus();
      actualizarContador();
    }

    // Inicializar con dos tareas de ejemplo
    document.getElementById('campo-tarea').value = "Configurar entorno de desarrollo";
    agregarTarea(false);
    document.getElementById('campo-tarea').value = "Aprender selectores del DOM";
    agregarTarea(false);
  </script>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de JavaScript ES6+ y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno Full-Stack Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.