将一个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的底部来实现此操作，但是我发现并没有复制所有的样式属性，而且我想放弃这种方法，因为我不想移动的是元素的副本/克隆品，而是真正的元素本身。谢谢。

- mwieczorek

Answer 1

以下是一些简单的JavaScript代码，假设该div元素有一个有效的父级：

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

你需要获取节点，然后将其添加到其父级节点中。 appendChild 将节点从当前位置移动到 DOM 中的新位置，如果该节点已经存在于 DOM 中。

- Ryan Kinal

Answer 2

将您的div包装在一个父div中：

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

- tomerz