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>
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.
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>lastElementChildinsertAdjacentHTML()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>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.
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 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>