Mover un elemento DIV a la parte inferior del elemento principal (como último elemento secundario)

Question

Estoy intentando crear un banner continuamente rotativo para la parte superior de la página de inicio de un sitio que estoy desarrollando. La mejor forma en que puedo figurar para mantenerlo constantemente en rotación es tomar el primer DIV (firstChild) y moverlo al final de la pila una vez que se deslice fuera de la vista.

Este:

<div id='foo0'></div> 
<div id='foo1'></div> 
<div id='foo2'></div> 
<div id='foo3'></div> 

debe convertirse en esto:

<div id='foo1'></div> 
<div id='foo2'></div> 
<div id='foo3'></div> 
<div id='foo0'></div> 

utilizo el marco del prototipo ... y yo he tratado de hacer esto mediante la clonación del elemento usando mi propio método y la inserción en la parte inferior del DIV padre, pero me parece que no todos los atributos de estilo se están transfiriendo, y me gustaría abandonar este método porque no quiero que lo que se está moviendo sea una copia/clon del elemento, pero el elemento real en sí.

Gracias.

Answer 1

He aquí algunos llanura javascript para hacerlo, asumiendo el div tiene un padre válida:

var d = document.getElementById('foo0'); 
d.parentNode.appendChild(d); 

Esencialmente presentamos lo mejor nodo, lo añaden a su padre. appendChild, si el nodo ya es parte del DOM, moverá el nodo desde su posición actual a la nueva posición en el DOM.

Answer 2

envolver su divs con un div padre:

var parentElement = document.querySelector("#yourParentDiv"); 
    parentElement.appendChild(parentElement.firstElementChild);