Is there a way to reorder "div" elements ,into a descending order, in the DOM according to their content with the onclick of a button?

Question

I am trying to reorder the "divs" (pushed into the DOM via Javascript) with the onclick of a button. Specifically, I'm looking for a Javascript function to reach in and compare the content of the "divs" and reorder the flex items into a descending order. Any solutions are appreciated. Thank you.

let orderBtn = document.getElementById("order")
let addBtn = document.getElementById("add-btn")
const container = document.getElementById("container")

let numArr = []
let numInc = 0

let child = document.getElementsByClassName(`child${numInc}`)

// a function to increment the numInc variable each time the addBtn is clicked and pushes that value to an array
addBtn.addEventListener("click",() => {
  numInc = numInc+1;
  numArr.push(numInc);
  console.log(numArr);

  container.innerHTML += `<div class="child${numInc} child" >${numInc}</div>`;
  console.log(`child${numInc}`)
})

// a function to order the numArr array in descending value and console.log out the result
orderBtn.addEventListener("click",()=>{
  numArr.sort(function(a, b){return b-a});
  console.log(numArr)
  console.log(`child${numInc}`)              
})

#container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: hsl(0,100%,80%);

}

.child {
    padding: 10px; 
    background: hsl(180,100%,70%); 
    border: solid black 3px; 
    margin: 10px;
    width: 3em;
    text-align: center;
}

<button id="order">Order Button</button>
<button id="add-btn">Add</button>
<div id="container"></div>

Answer 1

If all you want to do is reverse the order of the items, there are two ways to accomplish this: using the column-reverse CSS value, or reinserting the elements into DOM.

CSS column-reverse

The flex-direction CSS property, as you are using in your code, can take a value called column-reverse. This will show the elements in a column, but in reversed order.

Therefore, all your onclick has to do is attach a class to the parent div which changes the flex-direction.

orderBtn.addEventListener("click",() => {
    container.classList.add("reversed") 
})

let orderBtn = document.getElementById("order")
let addBtn = document.getElementById("add-btn")
const container = document.getElementById("container")

let numArr = []
let numInc = 0

let child = document.getElementsByClassName(`child${numInc}`)

// a function to increment the numInc variable each time the addBtn is clicked and pushes that value to an array
addBtn.addEventListener("click",() => {
  numInc = numInc+1;
  numArr.push(numInc);

  container.innerHTML += `<div class="child${numInc} child" >${numInc}</div>`;
})

// a function to order the numArr array in descending value and console.log out the result
orderBtn.addEventListener("click",() => {
  container.classList.add("reversed") 
})

#container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: hsl(0,100%,80%);
}

#container.reversed {
    flex-direction: column-reverse;
}

.child {
    padding: 10px; 
    background: hsl(180,100%,70%); 
    border: solid black 3px; 
    margin: 10px;
    width: 3em;
    text-align: center;
}

<button id="order">Order Button</button>
<button id="add-btn">Add</button>
<div id="container"></div>

Reinserting the Elements

If you want to actually reorder the elements physically, then you have to re-insert them into the DOM in the order that you want; reversing an array isn't enough.

This method is more flexible, meaning you can put the elements in any order (for instance, sorting by price), whereas the column-reverse method strictly reverses the order.

orderBtn.addEventListener("click",() => {
    const reversed = Array.from(container.children).reverse();
    container.append(...reversed);
})

let orderBtn = document.getElementById("order")
let addBtn = document.getElementById("add-btn")
const container = document.getElementById("container")

let numArr = []
let numInc = 0

let child = document.getElementsByClassName(`child${numInc}`)

// a function to increment the numInc variable each time the addBtn is clicked and pushes that value to an array
addBtn.addEventListener("click",() => {
  numInc = numInc+1;
  numArr.push(numInc);

  container.innerHTML += `<div class="child${numInc} child" >${numInc}</div>`;
})

// a function to order the numArr array in descending value and console.log out the result
orderBtn.addEventListener("click",() => {
  const reversed = Array.from(container.children).reverse();
  container.append(...reversed);
})

#container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: hsl(0,100%,80%);
}

.child {
    padding: 10px; 
    background: hsl(180,100%,70%); 
    border: solid black 3px; 
    margin: 10px;
    width: 3em;
    text-align: center;
}

<button id="order">Order Button</button>
<button id="add-btn">Add</button>
<div id="container"></div>