20 - Mover un nodo de tipo elemento y clonación de nodos (cloneNode)


Mover un nodo de tipo elemento.

Para mover un nodo y todos sus descendientes sólo necesitamos la referencia del mismo. Debemos utilizar el método ya conocido appendChild. Este método agrega el nodo que le indicamos a la nueva ubicación dentro del árbol y lo elimina automáticamente de su posición actual.

Para ver el funcionamiento de mover un nodo desarrollaremos un ejemplo que mueva el primer item de una lista no ordenada y lo disponga en otra lista.
pagina.html

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
</head>

<body>
    <ul id="lista1">
        <li>Opcion 1.</li>
        <li>Opcion 2.</li>
        <li>Opcion 3.</li>
    </ul>
    <input type="button" value="Mover elemento" onClick="moverItem()">
    <ul id="lista2">
    </ul>
    <script src="funciones.js"></script>
</body>

</html>

funciones.js

function moverItem() {
    let ref1 = document.getElementById('lista1')
    let refhijo = ref1.firstElementChild
    let ref2 = document.getElementById('lista2')
    ref2.appendChild(refhijo)
}

Obtenemos primero la referencia a la primera lista "ul":

    let ref1 = document.getElementById('lista1')

Obtenemos luego la referencia al primer "li" contenido en el "ul":

    let refhijo = ref1.firstElementChild

Ahora obtenemos la referencia a la segunda lista "ul":

    let ref2 = document.getElementById('lista2')

Por último añadimos la referencia del "li" al segundo "ul":

    ref2.appendChild(refhijo)

Es muy importante notar que cuando agregamos el item a la segunda lista desaparece de la primera.

Clonación de un nodo (cloneNode)

Si queremos hacer una copia idéntica de un nodo y ubicarlo en otra parte del árbol, podemos utilizar el método:

cloneNode( )

Si le pasamos como parámetro el valor true, hará una copia del nodo y todos sus descendientes; en caso de pasarle false sólo hará una copia de dicho nodo.

Confeccionaremos un ejemplo que se clone un div que contiene tres hipervínculos:
pagina.html

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
</head>

<body>
    <div id="enlaces">
        <a href="#">Enlace 1</a><br>
        <a href="#">Enlace 2</a><br>
        <a href="#">Enlace 3</a><br>
    </div>
    <input type="button" onclick="clonarNodos()" value="Clonar nodos">
    <div id="enlacesnuevos">
    </div>
    <script src="funciones.js"></script>
</body>

</html>

funciones.js

let orden = 1

function clonarNodos() {
    let id = document.getElementById("enlaces")
    let nuevos = id.cloneNode(true)
    nuevos.setAttribute("id", 'enlaces' + orden)
    orden++
    id = document.getElementById("enlacesnuevos")
    id.appendChild(nuevos)
}

En la función de clonar nodos debemos tener algunas consideraciones:

Como pasamos true al parámetro del método cloneNode se crea una copia idéntica del nodo y de todos sus descendientes (la llamada del método se hace a partir del objeto que queremos clonar):

    let id = document.getElementById("enlaces")
    let nuevos = id.cloneNode(true)

Ahora es importante tener en cuenta que los nodos clonados tienen el mismo valor en la propiedad id por lo que debemos modificársela:

    nuevos.setAttribute("id", 'enlaces' + orden)
    orden++

Por último, obtenemos la referencia del div donde se insertará este subárbol:

    id = document.getElementById("enlacesnuevos")
    id.appendChild(nuevos)

Retornar