Tutorial de DHTML : Temarios

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 párrafo contenido en un div y lo disponga en otro div.
pagina1.html

<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
</head>
<body>
<div id="region1"><p>Este es el primer párrafo</p><p>Este es el segundo párrafo</p><p>Este es el tercer párrafo</p></div>
<input type="button" value="Mover el primer párrafo" 
onClick="moverParrafo()">
<div id="region2">
</div>
</body>
</html>

funciones.js

function moverParrafo()
{
  var puntero1=document.getElementById('region1');
  var parrafo1=puntero1.firstChild;
  var puntero2=document.getElementById('region2');
  puntero2.appendChild(parrafo1);
}

Obtenemos primero la referencia al primer div:

  var puntero1=document.getElementById('region1');

Obtenemos luego la referencia al primer párrafo contenido en el div:

  var parrafo1=puntero1.firstChild;

Luego obtenemos la referencia al segundo div:

  var puntero2=document.getElementById('region2');

Por último añadimos la referencia del párrafo al segundo div:

  puntero2.appendChild(parrafo1);

Es muy importante notar que cuando agregamos el párrafo al segundo div, desaparece del primer div.

20 - Mover un nodo de tipo elemento.