Spostamento di un elemento DIV nella parte inferiore del genitore (come ultimo figlio)

Question

Sto provando a creare un banner a rotazione continua per la parte superiore della home page di un sito che sto sviluppando. Il modo migliore che riesco a capire per mantenerlo costantemente in rotazione è quello di prendere il primo DIV (firstChild) e spostarlo alla fine dello stack una volta che è scivolato fuori dalla vista.

questo:

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

dovrebbe diventare questa:

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

Io uso il quadro Prototype ... e ho cercato di farlo clonando l'elemento usando il mio metodo e l'inserimento nel fondo del DIV padre, ma trovo che non tutti gli attributi di stile vengono trasferiti, e mi piacerebbe abbandonare questo metodo perché non voglio che cosa viene spostato per essere una copia/clone del elemento, ma l'elemento stesso.

Grazie.

Answer 1

Ecco qualche semplice javascript per farlo, assumendo il div ha un genitore valida:

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

In sostanza si ottiene il nodo, quindi aggiungere al suo genitore. appendChild, se il nodo è già parte del DOM, sposta il nodo dalla posizione corrente alla nuova posizione nel DOM.

Answer 2

avvolgere le div con un div genitore:

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