Creacion y eliminacion de elementos - lizethcas/javascript-universe GitHub Wiki
La API del DOM no sólo permite seleccionar o modificar los elementos existentes, sino también eliminar y crear nuevos elementos para luego añadirlos al documento.
Este método permite crear un nuevo nodo del tipo especificado:
const newElement = document.createElement('div'); // Crea un elemento <div>
newElement.textContent = 'Hola, soy un nuevo div'; // Añade texto
newElement.classList.add('nuevo'); // Agrega una clase
document.body.appendChild(newElement); // Lo agrega al final del <body>const list = document.querySelector('.list');
list.innerHTML += '<li>Nuevo ítem</li>';const element = document.querySelector('.remove-me');
element.remove(); // Elimina el nodo del DOMconst parent = document.querySelector('.container');
const child = parent.querySelector('.child');
parent.removeChild(child); // Elimina al hijo desde el padreSi deseas eliminar todo el contenido interno de un elemento (como texto o nodos hijos), puedes hacerlo con innerHTML vacío:
const section = document.querySelector('.clean-me');
section.innerHTML = ''; // Vacía el contenido internoTambién puedes usar:
while (section.firstChild) {
section.removeChild(section.firstChild); // Elimina cada hijo
}Para que el elemento creado se muestre en la página, debe añadirse a un nodo existente en el árbol del DOM.
-
element.append(el1, el2, ...)
Añade uno o más elementos después de todos los hijos delelement. -
element.prepend(el1, el2, ...)
Añade uno o más elementos antes de todos los hijos delelement. -
element.after(el1, el2, ...)
Añade uno o más elementos después delelement. -
element.before(el1, el2, ...)
Añade uno o más elementos antes delelement.
Ejemplo
<h1>Usernames</h1>
<ul class="usernames">
<li>Mango</li>
</ul>
Javascript
const list = document.querySelector(".usernames");
// Añadir lista al final del elemento
const lastItem = document.createElement("li");
lastItem.textContent = "Poly";
list.append(lastItem);
// Añadir lista al comienzo del elemento
const firstItem = document.createElement("li");
firstItem.textContent = "Ajax";
list.prepend(firstItem);
