将 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

假设 div 有一个有效的父节点，这里有一些简单的 javascript 来完成此操作：

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