q/19753374/1636522

by wared

HTML

<ul id="arrange">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
<button onclick="rotateList1()">rotate 1</button>
<button onclick="rotateList2()">rotate 2</button>
<button onclick="rotateList3()">rotate 3</button>

JavaScript

function rotateList1(){
    var list = document.getElementById("arrange");
    var first = list.removeChild(list.firstChild);
    list.appendChild(first);
}
function rotateList2(){
    var list = document.getElementById("arrange");
    list.appendChild(list.firstChild);
}
function rotateList3(){
    var list = document.getElementById("arrange");
    list.appendChild(list.firstElementChild);
}