How to Shift the Order of Elements within a <div>?

April 22, 2022

My Problem:

Hey everybody. I have a quick question in regards to changing the order of elements in HTML using JavaScript. I want the items in the list to shift their positions down every time a button is clicked.

For example, the elements start in this order:

<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>

When the button is clicked they should shift to this order:

<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>

What I’ve Tried:

I’ve written all of the code up until the part where it changes the order of the elements. I’m just not sure what function or method to use, so I don’t even know where to start when it comes to trying to accomplish what I want to happen.

I would really appreciate it if someone could help me figure this out.

My Code:

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>

>Solution :

You could use insertAdjacentElement(), with afterbegin in this example:

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) {
  itemList[0].insertAdjacentElement("afterbegin", items[items.length - 1]);
}

<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>

The tricks applied are that APIs inserting nodes/elements remove the given node/element from its old place, and the getElementsBy...() methods often produce a live NodeList, which follows changes of the original collection. That’s how the last element in the single items collection automatically changes here and items[items.length - 1] refers to a different element after each click.