Di chuyển phần tử DIV xuống dưới cùng của cha mẹ (là con cuối cùng)

Question

Tôi đang cố gắng tạo biểu ngữ xoay liên tục cho đầu trang chủ của trang web mà tôi đang phát triển. Cách tốt nhất mà tôi có thể hình dung để giữ cho nó liên tục xoay vòng là lấy DIV đầu tiên (firstChild) và di chuyển nó đến cuối ngăn xếp khi nó trượt ra khỏi tầm nhìn.

này:

<div id='foo0'></div> 
<div id='foo1'></div> 
<div id='foo2'></div> 
<div id='foo3'></div> 

nên trở thành này:

<div id='foo1'></div> 
<div id='foo2'></div> 
<div id='foo3'></div> 
<div id='foo0'></div> 

tôi sử dụng khuôn khổ thử nghiệm ... và tôi đã cố gắng để làm điều này bằng cách nhân bản các phần tử sử dụng phương pháp riêng của tôi và chèn nó vào dưới cùng của DIV cha, nhưng tôi thấy rằng không phải tất cả các thuộc tính phong cách đang được chuyển sang, và tôi muốn từ bỏ phương thức này bởi vì tôi không muốn những gì được chuyển thành bản sao/bản sao của phần tử, nhưng chính yếu tố thực tế.

Cảm ơn.

Answer 1

Dưới đây là một số đồng bằng javascript để làm điều đó, giả sử div có cha mẹ hợp lệ:

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

Về cơ bản bạn sẽ có được nút, sau đó thêm nó vào mẹ của nó. appendChild, nếu nút đã là một phần của DOM, sẽ di chuyển nút từ vị trí hiện tại của nó đến vị trí mới trong DOM.

Answer 2

quấn số div của bạn bằng div phụ huynh:

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