将 DIV 元素移动到父元素的底部（作为最后一个子元素）答案

【问题标题】：Moving a DIV element to bottom of parent (as last child)将 DIV 元素移动到父元素的底部（作为最后一个子元素）
【发布时间】：2010-08-05 14:08:29
【问题描述】：

我正在尝试为我正在开发的网站的首页顶部创建一个不断旋转的横幅。我认为保持它不断旋转的最佳方法是取出第一个 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 的底部来做到这一点，但我发现并非所有样式属性都被结转了，我想放弃这种方法，因为我不希望移动的是元素的副本/克隆，而是实际的元素本身。

谢谢。

【问题讨论】：

【解决方案1】：

假设 div 有一个有效的父级，这里有一些简单的 javascript：

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

基本上你得到了节点，然后将它附加到它的父节点。 appendChild，如果节点已经是 DOM 的一部分，则将节点从当前位置移动到 DOM 中的新位置。

【讨论】：

【解决方案2】：

用父 div 包装你的 div：

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

【讨论】：