Déplacement d'un élément DIV vers le bas du parent (en tant que dernier enfant)

Question

J'essaie de créer une bannière en rotation continue pour le haut de la page d'accueil d'un site que je développe. La meilleure façon de le garder constamment en rotation est de prendre le premier DIV (firstChild) et de le déplacer à la fin de la pile une fois qu'il est hors de vue.

Ce:

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

deviendrais ceci:

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

J'utilise le cadre de prototype ... et je l'ai essayé de le faire en clonant l'élément en utilisant ma propre méthode et l'insertion dans le bas de la DIV parent, mais je trouve que tous les attributs de style ne sont pas reportés, et je voudrais abandonner cette méthode parce que je ne veux pas que ce qui est déplacé soit une copie/clone de la élément, mais l'élément lui-même.

Merci.

Answer 1

Voici quelques plaine javascript pour le faire, en supposant que la div a un parent valide:

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

Essentiellement, vous obtenez le nœud, puis l'ajouter à son parent. appendChild, si le noeud fait déjà partie du DOM, déplace le noeud de sa position actuelle à la nouvelle position dans le DOM.

Answer 2

envelopper vos divs avec un div parent:

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