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

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 >Item 1</div>
<div >Item 2</div>
<div >Item 3</div>
<div >Item 4</div>
<div >Item 5</div>

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

<div >Item 5</div>
<div >Item 1</div>
<div >Item 2</div>
<div >Item 3</div>
<div >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 >
    <div >Item 1</div>
    <div >Item 2</div>
    <div >Item 3</div>
    <div >Item 4</div>
    <div >Item 5</div>
</div>
<br>
<button >Shift Items</button>

CodePudding user response：

Get the last item using lastElementChild
Add it to the beginning using insertAdjacentHTML()
Remove it using 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 >
    <div >Item 1</div>
    <div >Item 2</div>
    <div >Item 3</div>
    <div >Item 4</div>
    <div >Item 5</div>
</div>
<br>
<button >Shift Items</button>

CodePudding user response：

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 >
  <div >Item 1</div>
  <div >Item 2</div>
  <div >Item 3</div>
  <div >Item 4</div>
  <div >Item 5</div>
</div>
<br>
<button >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.

CodePudding user response：

You can create a shift function using lastElementChild, removeChild and insertBefore.

function shift() {
    const parent = document.getElementsByClassName('item-list')[0];
    const last = parent.lastElementChild;
    parent.removeChild(last);
    parent.insertBefore(last, parent.firstElementChild);
}

const shiftButton = document.getElementsByClassName('shift-btn')[0];
shiftButton.onclick = shift;

<div >
  <div >Item 1</div>
  <div >Item 2</div>
  <div >Item 3</div>
  <div >Item 4</div>
  <div >Item 5</div>
</div>
<br>
<button >Shift Items</button>