Ir directamente al contenido de esta página
appendChild
, insertBefore
, replaceChild
, removeChild
y cloneNode
Acabamos de ver cómo crear elementos y nodos de texto, pero también hemos visto que estos nodos creados se mantienen en el «limbo» del documento hasta que los incluimos en el árbol del mismo.
Para trabajar incorporando, modificando o eliminando nodos, contamos con los métodos que vamos a ver a continuación.
appendChild
Por medio de appendChild
podemos incluir en un nodo un nuevo hijo, de esta manera:
elemento_padre.appendChild(nuevo_nodo);
El nuevo nodo se incluye inmediatamente después de los hijos ya existentes —si hay alguno— y el nodo padre cuenta con una nueva rama.
Por ejemplo, el siguiente código:
var lista = document.createElement('ul');
var item = document.createElement('li');
lista.appendChild(item);
crea un elemento ul
y un elemento li
, y convierte el segundo en hijo del primero.
insertBefore
insertBefore
nos permite elegir un nodo del documento e incluir otro antes que él.
Su sintaxis es:
elemento_padre.insertBefore(nuevo_nodo,nodo_de_referencia);
Si tuviéramos un fragmento de un documento como éste:
<div id="padre">
<p>Un párrafo.</p>
<p>Otro párrafo.</p>
</div>
y quisiéramos añadir un nuevo párrafo antes del segundo, lo haríamos así:
// Creamos el nuevo párrafo
var nuevo_parrafo = document.createElement('p').appendChild(document.createTextNode('Nuevo párrafo.'));
// Recojemos en una variable el segundo párrafo
var segundo_p = document.getElementById('padre').getElementsByTagName('p')[1];
// Y ahora lo insertamos
document.getElementById('padre').insertBefore(nuevo_parrafo,segundo_p);
insertAfter
?Cuando se empieza a trabajar con el DOM, uno echa de menos un método que permita incluir un nodo detrás de otro. Como no lo hay, todo programador de JavaScript acaba creándose una función propia que haga eso exactamente. Ésta es la mía:
function insertAfter(e,i){
if(e.nextSibling){
e.parentNode.insertBefore(i,e.nextSibling);
} else {
e.parentNode.appendChild(i);
}
}
Los parámetros son:
Espero que sea de ayuda.
replaceChild
Para reemplazar un nodo por otro contamos con replaceChild
, cuya sintaxis es:
elemento_padre.replaceChild(nuevo_nodo,nodo_a_reemplazar);
Con el mismo marcado que para el ejemplo de insertBefore
, si quisiéramos sustituir el segundo párrafo por el que creamos, lo haríamos así:
document.getElementById('padre').replaceChild(nuevo_parrafo,segundo_p);
removeChild
Dado que podemos incluir nuevos hijos en un nodo, tiene sentido que podamos eliminarlos. Para ello existe el método removeChild
.
La sintaxis es:
elemento_padre.removeChild(nodo_a_eliminar);
Con el mismo ejemplo anterior, eliminar el segundo párrafo ´sería algo tan sencillo como:
document.getElementById('padre').removeChild(segundo_p);
cloneNode
Por último, podemos crear un clon de un nodo por medio de cloneNode
:
elemento_a_clonar.cloneNode(booleano);
El booleano que se pasa como parámetro define si se quiere clonar el elemento —con el valor false
—, o bien si se quiere clonar con su contenido —con el valor true
—, es decir, el elemento y todos sus descendientes.
Si quisiéramos clonar nuestro div
de ejemplo con el siguiente código:
var clon = document.getElementById('padre').cloneNode(false);
clon contendría un elemento div
, pero de esta manera:
var clon = document.getElementById('padre').cloneNode(true);
contendría un elemento div
con dos párrafos que contendrían los mismos nodos de texto que el original.
Y vista toda la teoría hasta aquí, veamos unos cuantos ejemplos en funcionamiento de todos estos métodos.