2010-08-05 93 views
8

我正在嘗試爲正在開發的網站的首頁頂部創建一個連續旋轉的橫幅。我可以保持它不斷旋轉的最佳方式是取出第一個DIV(firstChild),並將其移動到堆棧的末端,一旦它滑出視圖。將DIV元素移至父級底部(作爲最後一個孩子)

此:

<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的底部,但我發現並非所有的樣式屬性都被繼承了,我想放棄這種方法,因爲我不希望被移動的是複製/克隆元素,但實際元素本身。

謝謝。

回答

13

下面是一些簡單的JavaScript來做到這一點,假設div有一個有效的父:

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

基本上你得到的節點,然後將其附加到其父。 appendChild,如果節點已經是DOM的一部分,將會把節點從其當前位置移動到DOM中的新位置。

2

與父母DIV換你的div:

var parentElement = document.querySelector("#yourParentDiv"); 
    parentElement.appendChild(parentElement.firstElementChild); 
相關問題