appendChild, insertBefore, replaceChild, removeChild y cloneNode

Tabla de contenidos

1. Introducción
2. appendChild
3. insertBefore
   1. ¿insertAfter?
4. replaceChild
5. removeChild
6. cloneNode

Introducción

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:

• e: el nodo tras el que se quiere insertar otro.
• i: el nodo que se quiere insertar.

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.