How to sort HTML elements alphabetically with vanilla JavaScript?

Question

I have these animal cards in a container div, and i want to sort them alphabetically. I only want to use vanilla javascript, no jquery please.

  <div class="animal-container">
<div class="animal-cards">
  <div class="img-container">
    <img src="#">
  </div>
  <div class="animal-info">
    <div class="animal-name">Giraffe</div>
  </div>
</div>
    <div class="animal-cards">
  <div class="img-container">
    <img src="#">
  </div>
  <div class="animal-info">
    <div class="animal-name">Camel</div>
  </div>
</div>
    <div class="animal-cards">
  <div class="img-container">
    <img src="#">
  </div>
  <div class="animal-info">
    <div class="animal-name">Dog</div>
  </div>
</div>
    <div class="animal-cards">
  <div class="img-container">
    <img src="#">
  </div>
  <div class="animal-info">
    <div class="animal-name">Lion</div>
  </div>
</div>

Please also show the javascript code that you tried! You can start with getElementsByclassname() or querySelector() — Kokodoko
– Kokodoko, Commented Jul 21, 2021 at 11:10
You may use an array to store the animals' data and sort the array and append the DOM from the array object. — ikhvjs
– ikhvjs, Commented Jul 21, 2021 at 12:00

ahsan · Accepted Answer · 2021-07-21 11:18:44Z

Here's what I came up with. I selected all tags with the class "animal-name". Then stored their textContent in an Array, sorted it then replaced it in the original tags

let animals = document.querySelectorAll('.animal-name');

let animalNames = [];
for(let i=0; i<animals.length; i++){
    animalNames.push(animals[i].textContent)
}

animalNames = animalNames.sort();

for(let i=0; i<animals.length; i++){
    animals[i].textContent = animalNames[i];
}

<div class="animal-container">
<div class="animal-cards">
  <div class="img-container">
    <img src="#">
  </div>
  <div class="animal-info">
    <div class="animal-name">Giraffe</div>
  </div>
</div>
    <div class="animal-cards">
  <div class="img-container">
    <img src="#">
  </div>
  <div class="animal-info">
    <div class="animal-name">Camel</div>
  </div>
</div>
    <div class="animal-cards">
  <div class="img-container">
    <img src="#">
  </div>
  <div class="animal-info">
    <div class="animal-name">Dog</div>
  </div>
</div>
    <div class="animal-cards">
  <div class="img-container">
    <img src="#">
  </div>
  <div class="animal-info">
    <div class="animal-name">Lion</div>
  </div>
</div>

trincot · Accepted Answer · 2021-07-21 11:26:00Z

The idea is to sort the DOM elements, and then append them in that order again inside the container element: this will actually move these elements in their right order:

const container = document.querySelector(".animal-container");
const key = (a) => a.querySelector(".animal-name").textContent.trim();

Array.from(container.children)
     .sort((a, b) => key(a).localeCompare(key(b)))
     .forEach(child => container.appendChild(child));

<div class="animal-container">
  <div class="animal-cards">
    <div class="img-container">
      <img src="#">
    </div>
    <div class="animal-info">
      <div class="animal-name">Giraffe</div>
    </div>
  </div>
  <div class="animal-cards">
    <div class="img-container">
      <img src="#">
    </div>
    <div class="animal-info">
      <div class="animal-name">Camel</div>
    </div>
  </div>
  <div class="animal-cards">
    <div class="img-container">
      <img src="#">
    </div>
    <div class="animal-info">
      <div class="animal-name">Dog</div>
    </div>
  </div>
  <div class="animal-cards">
    <div class="img-container">
      <img src="#">
    </div>
    <div class="animal-info">
      <div class="animal-name">Lion</div>
    </div>
  </div>
</div>

user3875913 · Accepted Answer · 2021-07-21 13:11:16Z

0

You can do this by appending the elements to the DOM dynamically using JS.

For example,

const arr = ["Giraffe", "Camel", "Dog", "Lion"].sort()
arr.forEach((word) => {
     document.getElementById("animal-container").appendChild(
    <div class="animal-cards">
  <div class="img-container">
    <img src="#">
  </div>
  <div class="animal-info">
    <div class="animal-name">{word}</div>
  </div>
    
)})

edited Jul 21, 2021 at 13:11

answered Jul 21, 2021 at 11:20

user3875913

2522 silver badges11 bronze badges

1 Comment

ikhvjs Over a year ago

append should be appendChild instead

Collectives™ on Stack Overflow

How to sort HTML elements alphabetically with vanilla JavaScript?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related