Mover un nodo de tipo elemento.
Introducción a DHTML
Importancia del DOM (Document Object Model)
Accediendo a una marca HTML a través del DOM (getElementById)
Accediendo a los nodos hijos de un elemento HTML(childNodes)
Accediendo a un nodo de texto de un elemento HTML (childNodes - nodeValue)
Accediendo a un nodo padre (parentNode)
Accediendo a un nodo hermano (nextSibling y previousSibling)
Otras formas de acceder a los nodos hijos (firstChild - lastChild)
Accediendo a un conjunto de marcas HTML similares (getElementsByTagName)
Agregar un nodo de texto (appendChild - createTextNode)
Eliminar un nodo de texto (removeChild) y Verificar si tiene nodos hijo (hasChildNodes)
Crear un nodo de tipo elemento createElement()
Agregar un nodo de tipo elemento (appendChild)
Agregar un nodo de tipo elemento en medio (insertBefore - createElement)
Eliminar un nodo de tipo elemento (removeChild)
Crear un atributo y agregárselo a un nodo de tipo elemento (setAttribute)
Borrar un atributo de un elemento (removeAttribute)
Recuperar un atributo de un elemento (getAttribute)
Verificar si un elemento tiene un atributo (hasAttribute)
Mover un nodo de tipo elemento.
Clonación de un nodo (cloneNode)
Consultar el tipo de nodo (nodeType)
Accediendo al estilo de una marca HTML.
Creación de controles de tipo input dinámicamente.
Evento onclick.
Referencia del objeto que generó el evento (this)
Información generada en un evento
Eventos onmousedown,onmouseup.
Evento ondblclick
Eventos onmouseover, onmouseout
Evento onmousemove
Evento onload y onunload
Modelo de eventos del DOM según la especificación de W3C
Evento load y unload (DOM)
Evento click (DOM)
Referencia del objeto que generó el evento (DOM)
Eventos mousedown ,mouseup (DOM)
Evento mousemove (DOM)
Evento focus (DOM)
Evento blur (DOM)
Evento submit (DOM)
Eventos keypress, keydown y keyup (DOM)
Evento change (DOM)
Evento scroll (DOM)
Información contenida en el objeto event (DOM)
Burbujeo y captura de eventos (DOM)
Detener el burbujeo de eventos (DOM)
Desactivación del evento por defecto de un elemento HTML (DOM)
Propiedad innerHTML
Accediendo a un elemento HTML a través de un selector CSS (querySelector)
Accediendo a un conjunto de elementos HTML a través de un selector CSS (querySelectorAll)
Mostrar y ocultar mensaje
Mensajes de error en la carga de un formulario
Mostrar un Tooltip
Apertura de enlace en la misma página o en otra pestaña
Arrastrar y soltar (drag and drop)
Menu desplegable accesible

Mover un nodo de tipo elemento.

Agrega un nuevo nodo al final de la lista de un elemento hijo de un elemento padre especificado.

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 (para facilitar el algoritmo todos los elementos "li" de la lista "ul" estarán en la misma línea de texto para que no haya nodos de texto)

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script>
function moverItem()
  var ref1=document.getElementById('lista1');
  var refhijo=ref1.firstChild;
  var ref2=document.getElementById('lista2');
  ref2.appendChild(refhijo);
}
</script>
</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>
</body>
</html>
Ver ejemplo anterior


El código en javascript es:

{
function moverItem()
  var ref1=document.getElementById('lista1');
  var refhijo=ref1.firstChild;
  var ref2=document.getElementById('lista2');
  ref2.appendChild(refhijo);
}

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

  var ref1=document.getElementById('lista1');

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

  var refhijo=ref1.firstChild;

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

  var 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 el item a la segunda lista desaparece de la primera.