將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);