L68 - Crear y Eliminar Elementos del DOM

🧠 Concepto

Además de seleccionar y modificar elementos existentes, el DOM nos permite crear nuevos elementos desde cero, insertarlos en el árbol e eliminarlos cuando ya no los necesitamos.

💻 createElement() y createTextNode()

// Crear un elemento vacío
const div = document.createElement('div');
const parrafo = document.createElement('p');
const enlace = document.createElement('a');

// Crear un nodo de texto
const texto = document.createTextNode('Hola mundo');

// Añadir el texto al elemento
parrafo.appendChild(texto);

// También se puede hacer directamente con textContent
const span = document.createElement('span');
span.textContent = 'Texto directo';

📝 appendChild() e insertBefore()

appendChild()

Añade un hijo al final del elemento padre:

const lista = document.getElementById('lista');
const nuevoItem = document.createElement('li');
nuevoItem.textContent = 'Elemento 4';

lista.appendChild(nuevoItem); // Al final de la lista

⚠️ Si el elemento ya existe en el DOM, appendChild lo mueve (no lo duplica).

const item = document.querySelector('li:first-child');
const otraLista = document.querySelector('#otra-lista');
otraLista.appendChild(item); // El li se mueve de la primera a la segunda lista

insertBefore()

Inserta un hijo en una posición específica (antes de un nodo de referencia):

const lista = document.getElementById('lista');
const primerItem = lista.firstElementChild;

const nuevoItem = document.createElement('li');
nuevoItem.textContent = 'Elemento insertado';

// Insertar antes del primer hijo
lista.insertBefore(nuevoItem, primerItem);

// Insertar al final (si el nodo de referencia es null, funciona como appendChild)
lista.insertBefore(nuevoItem, null);

💻 append() vs appendChild()

const contenedor = document.getElementById('contenedor');

// appendChild: solo acepta un nodo hijo
contenedor.appendChild(document.createElement('div'));

// append: más flexible, acepta múltiples nodos y strings
contenedor.append(
  document.createElement('div'),
  ' texto adicional ',
  document.createElement('span')
);

	appendChild	append
Parámetros	Un solo nodo	Múltiples nodos o strings
Valor de retorno	El nodo añadido	undefined
Strings	No acepta	Convierte automáticamente a texto
Soporte	Desde siempre	Moderno (IE no compatible)

📝 replaceChild() y removeChild()

replaceChild()

Reemplaza un hijo existente por otro:

const lista = document.getElementById('lista');
const antiguo = lista.children[1]; // segundo hijo

const nuevo = document.createElement('li');
nuevo.textContent = 'Reemplazado';

lista.replaceChild(nuevo, antiguo);

removeChild()

Elimina un hijo específico:

const lista = document.getElementById('lista');
const eliminar = lista.children[0];

lista.removeChild(eliminar); // Devuelve el nodo eliminado

🎯 element.remove()

El método más directo y moderno. Elimina el elemento del DOM sin necesidad de acceder al padre:

const elemento = document.querySelector('.eliminar');
elemento.remove(); // ¡Adiós!

// Antes (engorroso)
elemento.parentNode.removeChild(elemento);

// Hoy (directo)
elemento.remove();

💻 DocumentFragment

Un DocumentFragment es un contenedor ligero que existe en memoria. Las operaciones sobre él no disparan reflows/repaints hasta que se inserta en el DOM. Es la forma óptima de hacer inserciones masivas:

const lista = document.getElementById('lista');

// Crear fragmento
const fragmento = document.createDocumentFragment();

// Añadir muchos elementos al fragmento
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `Elemento ${i + 1}`;
  fragmento.appendChild(li);
}

// Insertar todo de una vez (un solo reflow)
lista.appendChild(fragmento);

Sin DocumentFragment (ineficiente)

// ❌ 1000 reflows (uno por cada appendChild)
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `Elemento ${i + 1}`;
  lista.appendChild(li);
}

🧠 Métodos de inserción avanzados (insertAdjacentHTML / insertAdjacentElement)

const elemento = document.querySelector('.contenedor');

// Insertar HTML en una posición relativa
elemento.insertAdjacentHTML('beforebegin', '<div>Antes del elemento</div>');
elemento.insertAdjacentHTML('afterbegin', '<div>Primer hijo</div>');
elemento.insertAdjacentHTML('beforeend', '<div>Último hijo</div>');
elemento.insertAdjacentHTML('afterend', '<div>Después del elemento</div>');

También existen insertAdjacentElement() y insertAdjacentText() para nodos y texto respectivamente.

🎯 Ejemplo completo: gestión de una lista

function agregarItem(texto) {
  const lista = document.getElementById('lista-tareas');
  const li = document.createElement('li');
  li.className = 'tarea';

  const span = document.createElement('span');
  span.textContent = texto;

  const btnEliminar = document.createElement('button');
  btnEliminar.textContent = '✕';
  btnEliminar.addEventListener('click', () => li.remove());

  li.append(span, btnEliminar);
  lista.appendChild(li);
}

function eliminarCompletadas() {
  document.querySelectorAll('.tarea.completada')
    .forEach(tarea => tarea.remove());
}

function vaciarLista() {
  const lista = document.getElementById('lista-tareas');
  lista.innerHTML = ''; // ⚠️ También elimina event listeners internos
  // Alternativa segura:
  while (lista.firstChild) {
    lista.removeChild(lista.firstChild);
  }
}

🎯 Regla de oro: para inserciones múltiples usa DocumentFragment. Para eliminar usa remove(). Para crear contenido HTML dinámico seguro usa createElement + textContent, no innerHTML.