Manipular el DOM
Vamos a ver algunos métodos que nos permiten eliminar, añadir o reemplazar elementos del DOM.
- document.createElement("tag") → Crea un elemento HTML. Todavía no estará en el DOM, hasta que lo insertemos (usando appendChild, por ejemplo) dentro de otro elemento del DOM.
- document.createTextNode("text") → Crea un nodo de texto que podemos introducir dentro de un elemento HTML. También podríamos usar innerText en su lugar, pero esto nos permite por ejemplo, añadir un nodo de texto junto a otros nodos HTML dentro de un mismo elemento fácilmente.
- element.append(...childElements) → Añade uno o más elementos al final del nodo actual. También pueden ser nodos de texto simplemente pasándole como parámetro un string.
- element.prepend(...childElements) → Añade uno o más elmentos al principio del nodo actual.
- element.before(...childElements) → Añade uno o más elementos antes del elemento actual (hermanos).
- element.after(...childElements) → Añade uno o más elementos después del elemento actual (hermanos).
- element.remove() → El elemento se elimina del DOM.
- element.replaceWith(...otherElements) → Reemplaza el elemento actual por uno o más elementos que se sitúan en la misma posición.
- element.replaceChildren(...otherElements) → Reemplaza todos los hijos del elemento actual por los elementos que se le pasan por parámetro. Si no se le pasa ninguno, el elemento queda vacío.
Existen otros métodos como appendChild, insertBefore, removeChild o replaceChild que no vale la pena explicar debido a que los métodos arriba descritos son más modernos, más fáciles de utilizar, y permiten hacer más cosas con menos código.