Elementos JavaScript HTML DOM (nodos)
Adición y eliminación de nodos (elementos HTML)
Creación de nuevos elementos HTML (nodos)
Para agregar un nuevo elemento al HTML DOM, primero debe crear el elemento (nodo de elemento) y luego agregarlo a un elemento existente.
Ejemplo
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
element.appendChild(para);
</script>
Ejemplo explicado
Este código crea un nuevo <p>elemento:
const para = document.createElement("p");
Para agregar texto al <p>elemento, primero debe crear un nodo de texto. Este código crea un nodo de texto:
const node = document.createTextNode("This is a new paragraph.");
Luego debe agregar el nodo de texto al <p>elemento:
para.appendChild(node);
Finalmente, debe agregar el nuevo elemento a un elemento existente.
Este código encuentra un elemento existente:
const element = document.getElementById("div1");
Este código agrega el nuevo elemento al elemento existente:
element.appendChild(para);
Creación de nuevos elementos HTML - insertBefore()
El appendChild()método del ejemplo anterior, agregó el nuevo elemento como el último hijo del padre.
Si no quieres eso, puedes usar el insertBefore()método:
Ejemplo
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
const child = document.getElementById("p1");
element.insertBefore(para, child);
</script>
Eliminación de elementos HTML existentes
Para eliminar un elemento HTML, utilice el remove()
método:
Ejemplo
<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const elmnt = document.getElementById("p1");
elmnt.remove();
</script>
Ejemplo explicado
El documento HTML contiene un <div>elemento con dos nodos secundarios (dos <p>
elementos):
<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Busque el elemento que desea eliminar:
const elmnt = document.getElementById("p1");
Luego ejecute el método remove() en ese elemento:
elmnt.remove();
El remove()método no funciona en navegadores más antiguos, vea el ejemplo a continuación sobre cómo usarlo en su
removeChild()lugar.
Eliminación de un nodo secundario
Para los navegadores que no admiten el remove()método, debe encontrar el nodo principal para eliminar un elemento:
Ejemplo
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>
Ejemplo explicado
Este documento HTML contiene un <div>elemento con dos nodos secundarios (dos <p>
elementos):
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Encuentre el elemento con id="div1":
const parent = document.getElementById("div1");
Encuentre el <p>elemento con id="p1":
const child = document.getElementById("p1");
Eliminar el hijo del padre:
parent.removeChild(child);
Aquí hay una solución común: busque el elemento secundario que desea eliminar y use su
parentNodepropiedad para encontrar el elemento principal:
const child = document.getElementById("p1");
child.parentNode.removeChild(child);
Sustitución de elementos HTML
Para reemplazar un elemento en HTML DOM, use el replaceChild()método:
Ejemplo
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>