JS操作子节点移动位置

 

HTML：

<div id="father">
    <div class="son" style="color: #8C85E6">1</div>
    <div class="son">2</div>
    <div class="son">3</div>
    <div class="son">4</div>
    <div class="son">5</div>
</div>
<button onclick="prev()">prev</button>
<button onclick="next()">next</button>

js代码：

function next() {
        var father=document.getElementById("father")
        var son=document.getElementsByClassName("son");
        father.insertBefore(son[son.length-1],son[0]);
    }

    function prev() {
        var father=document.getElementById("father")
        var first=document.getElementsByClassName("son")[0];
        father.appendChild(first)
    }

实现的效果为：点击next，将第一个元素追加到末尾；点击prev，将最后一个追加到最前面；