javascript - 将 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>

我使用原型框架...我尝试通过使用我自己的方法克隆元素并将其插入到父 DIV 的底部来做到这一点，但我发现并非所有样式属性都被继承，我想放弃这种方法，因为我不希望移动的内容是元素的副本/克隆，而是实际的元素本身。

谢谢。

score 26 · Accepted Answer

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

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

本质上，您获取节点，然后将其附加到其父节点。appendChild，如果节点已经是 DOM 的一部分，则将节点从其当前位置移动到 DOM 中的新位置。

score 2 · Accepted Answer

用父 div 包装你的 div：

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

2 回答 2