Перемещение элемента DIV к нижней части родительского элемента (как последнего дочернего элемента)

Question

Я пытаюсь создать постоянно вращающийся баннер для верхней части главной страницы сайта, который я разрабатываю. Лучший способ, которым я могу придумать, чтобы держать его постоянно вращающимся, это взять первый DIV (firstChild) и переместить его в конец стека, как только он выскользнет из поля зрения.

Это:

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

Должно стать так:

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

Я использую платформу Prototype ... и я пытался сделать это, клонируя элемент с помощью моего собственного метода и вставляя его в нижнюю часть родительского DIV, но я обнаружил, что не все атрибуты стиля используются перенесено, и я хотел бы отказаться от этого метода, потому что я не хочу, чтобы перемещаемая часть была копией / клоном элемента, а сам фактический элемент.

Спасибо.

Answer 1

Вот некоторый простой javascript для этого, при условии, что у div есть допустимый родитель:

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

По сути, вы получаете узел, а затем добавляете его к его родителю.appendChild, если узел уже является частью DOM, переместит узел из его текущей позиции в новую позицию в DOM.

Answer 2

оберните ваши div с родительским div:

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