关于javascript:将DIV元素移动到父级的底部(作为最后一个孩子)

Moving a DIV element to bottom of parent (as last child)

我正在尝试为我正在开发的网站的主页顶部创建一个不断旋转的横幅。我能想到的保持它不断旋转的最好方法是取第一个DIV(FirstChild),一旦它从视图中滑出,就把它移到堆栈的末尾。

这是:

1
 

应该变成这样:

1
 

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

谢谢。


下面是一些简单的javascript,假设DIV有一个有效的父级:

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

本质上,您可以获取节点,然后将其附加到其父节点。如果节点已经是dom的一部分,那么appendChild会将节点从当前位置移动到dom中的新位置。


用父级分隔符包装分隔符:

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