How to Use JavaScript to Rearrange Elements on a Web Page 🛠️

Have you ever been to a Web page that has content not sorted the way you would like? And it doesn't have a feature to sort it out? 🙄

It can be really frustrating but luckily, if you really need to have the content sorted, you can easily do it yourself using JavaScript! ❤️

In this tutorial, I'll guide you step by step with an example from DEV:

Screenshot of the "Top tags" page on DEV, where the tags seemed to be sorted in an unknown order...

Tutorial

Open the page you want to sort in your browser, open the DevTools (F12) and be ready to explore the DOM structure of your page!

1 – Determine the structure of an element

In order to be able to sort all the items, you must understand how an element that you want to be sorted is made. Select the element with the Inspect button (or Ctrl + Shift + C) and expand it recursively.

2 – Determine what the elements will be sorted on

Do you want to sort the divs by their title? Maybe by a numeric attribute?

In my case, I want to sort them by the number of posts published. If I type $0.querySelector('p.color-base-60').innerText in the console, I'm able to obtain 64765 posts published.

3 – Determine the order

Do you want an ascending order ↗️ or a descending order ↘️?

const ascendingOrder = false;

4 – Select all the elements

Are you able to find a selector to get all the items you want to sort? In my case, all the elements have the tag-card class.

const elements = [...document.querySelectorAll('.tag-card')]

5 – Find the parent node of all elements

You can write another selector to find the div element that contains all the children, or you can choose the easiest way and ask the first element for its parent.

const parentElement = document.querySelector('.grid');

// or

const parentElement = elements[0].parentNode;

Get the parent node of our elements.

We will use the parent node to reorder its children by preserving its structure. 🧬

6 – Sort the elements

Now is the time to assemble all the scripts into one and to run it on our page! 🤩

// 2 - Detemine the selector
const selector = element => element.querySelector('p.color-base-60').innerText

// 3 - Choose the wanted order
const ascendingOrder = false;
const isNumeric = true;

// 4 - Select all elements
const elements = [...document.querySelectorAll('.tag-card')];

// 5 - Find their parent
const parentElement = elements[0].parentNode;

// 6 - Sort the elements
const collator = new Intl.Collator(undefined, {numeric: isNumeric, sensitivity: 'base'});

elements
.sort((elementA, elementB) => {
  const [firstElement, secondElement] = ascendingOrder ? [elementA, elementB] : [elementB, elementA];
  const textOfFirstElement = selector(firstElement);
  const textOfSecondElement = selector(secondElement);
  return collator.compare(textOfFirstElement , textOfSecondElement)
})
.forEach(element => parentElement.appendChild(element));

The final script to sort the items on our page.