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