javascript - 如何改变 <div> 中元素的顺序？

Question

我的问题:

大家好。我有一个关于使用 JavaScript 更改 HTML 中元素顺序的简单问题。我希望每次单击按钮时列表中的项目都会下移其位置。

例如，元素按以下顺序开始:

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>

单击按钮时，它们应该转换为以下顺序:

<div class="item">Item 5</div>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>

我尝试过的:

我已经编写了所有代码，直到更改元素顺序的部分。我只是不确定要使用什么函数或方法，所以我什至不知道在尝试完成我想要发生的事情时从哪里开始。

如果有人能帮我解决这个问题，我将非常感激。

我的代码:

var itemList = document.getElementsByClassName('item-list')
var items = document.getElementsByClassName('item')
var shiftBtns = document.getElementsByClassName('shift-btn')

for (let i = 0; i < shiftBtns.length; i++) {
    shiftBtns[i].addEventListener('click', shiftItems)
}

function shiftItems(event) {

    // Insert code that shifts the elements here.
    console.log('Wow! The order has changed!')
    
}

<div class="item-list">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
</div>
<br>
<button class="shift-btn">Shift Items</button>

Answer 1

1. 使用 lastElementChild 获取最后一项
2. 使用 insertAdjacentHTML() 将其添加到开头
3. 使用remove()删除它

---

function shiftItems(event) {
    const last = itemList[0].lastElementChild;
    itemList[0].insertAdjacentHTML('afterbegin', last.outerHTML);
    last.remove();
}

---

var shiftBtns = document.getElementsByClassName('shift-btn');
var itemList = document.getElementsByClassName('item-list');

for (let i = 0; i < shiftBtns.length; i++) {
    shiftBtns[i].addEventListener('click', shiftItems)
}

function shiftItems(event) {
    const last = itemList[0].lastElementChild;
    itemList[0].insertAdjacentHTML('afterbegin', last.outerHTML);
    last.remove();
}

<div class="item-list">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
</div>
<br>
<button class="shift-btn">Shift Items</button>