Nodos DOM de JavaScript

Tabla de contenido

Agregar y eliminar nodos (elementos HTML)

Crear nuevos elementos HTML (nodos)

Para agregar un nuevo elemento al DOM HTML, 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>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Add a new HTML Element.</p>

<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>

</body>
</html>

Ejemplo explicado

Este código crea un nuevo elemento <p>:

const para = document.createElement("p");

Para agregar texto al elemento <p>, 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 debes agregar el nodo de texto al elemento <p>:

para.appendChild(node);

Finalmente debes 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);

Creando nuevos elementos HTML - insertBefore()

El método appendChild() del ejemplo anterior añadió el nuevo elemento como el último hijo del padre.

Si no quieres eso, puedes usar el método insertBefore():

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>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Add a new HTML Element.</p>

<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>

</body>
</html>

Eliminar elementos HTML existentes

Para eliminar un elemento HTML, utilice 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>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<h3>Remove an HTML Element.</h3>

<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<button onclick="myFunction()">Remove Element</button>

<script>
function myFunction() {
document.getElementById("p1").remove();
}
</script>

</body>
</html>

Ejemplo explicado

El documento HTML contiene un elemento <div> 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 método remove() no funciona en navegadores más antiguos, consulte el siguiente ejemplo sobre cómo utilizar removeChild() en su lugar.

Eliminar un nodo secundario

Para los navegadores que no soportan el método remove(), debe encontrar el nodo padre 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>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Remove Child Element</p>

<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>

</body>
</html>

Ejemplo explicado

Este documento HTML contiene un elemento <div> 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>

Busque el elemento con id="div1":

const parent = document.getElementById("div1");

Busque el elemento <p> con id="p1":

const child = document.getElementById("p1");

Quitar al niño del padre:

parent.removeChild(child);

A continuación se ofrece una solución alternativa común: busque el elemento secundario que desea eliminar y utilice su Propiedad parentNode para encontrar el padre:

const child = document.getElementById("p1");
child.parentNode.removeChild(child);

Reemplazo de elementos HTML

Para reemplazar un elemento en el DOM HTML, use el método replaceChild():

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>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<h3>Replace an HTML Element.</h3>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is a paragraph.</p>
</div>

<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
parent.replaceChild(para,child);
</script>

</body>
</html>