Adición y eliminación de nodos (elementos HTML)
Creación de nuevos elementos HTML (nodos)
Para añadir un nuevo elemento a la DOM de HTML, se debe crear el elemento (nodo de elemento) en primer lugar y, a continuación, añadir 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>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var
element = document.getElementById("div1");
element.appendChild(para);
</script> Inténtalo tú mismo " ejemplo Explicación
Este código crea un nuevo <p> elemento:
var para = document.createElement("p");
Para añadir texto a la <p> elemento, se debe crear un nodo de texto en primer lugar. Este código crea un nodo de texto:
var node = document.createTextNode("This is a new paragraph.");
A continuación, debe agregar el nodo de texto a la <p> elemento:
para.appendChild(node);
Por último hay que añadir el nuevo elemento a un elemento existente.
Este código se encuentra un elemento existente:
var
element = document.getElementById("div1");
Este código añade el nuevo elemento al elemento existente:
element.appendChild(para);
La creación de nuevos elementos HTML - insertBefore()
El appendChild() método en el ejemplo anterior, añade el nuevo elemento como el último hijo del padre.
Si no desea que se puede utilizar la 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>
var para = document.createElement("p");
var node = document.createTextNode("This
is new.");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para,child);
</script> Inténtalo tú mismo " Borrado de elementos HTML existentes
Para eliminar un elemento HTML, se debe conocer el padre del elemento:
Ejemplo
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script> Inténtalo tú mismo " El método node.remove() está implementado en la especificación DOM 4.
Sin embargo, debido a la mala soporte de los navegadores, no debe utilizarlo.
ejemplo Explicación
Este documento HTML contiene un <div> elemento con dos nodos hijos (dos <p> elementos):
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Encontrar el elemento con id="div1" :
var parent = document.getElementById("div1");
Busque el elemento <p> con id="p1" :
var child = document.getElementById("p1");
Retirar al niño del padre:
parent.removeChild(child);
Sería agradable ser capaz de eliminar un elemento sin hacer referencia a los padres.
Pero lo siento. El DOM necesita saber tanto el elemento que desea eliminar, y su matriz.
Aquí es una solución común: Encontrar el niño que desea eliminar, y el uso de su propiedad parentNode encontrar al padre:
var child = document.getElementById("p1");
child.parentNode.removeChild(child);
Sustitución de elementos HTML
Para reemplazar un elemento para el DOM de HTML, utilice 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>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para,child);
</script> Inténtalo tú mismo "