How To Sort Alphabetically Html Unordered Elements Using JavaScript

Learning how to sort alphabetically HTML unordered elements using JavaScript can be very useful in a lot of situations. For example, if you have a list of links and you want to be able to sort them, or if you have a list of names or any other content on your page and you want to be able to sort them alphabetically. This tutorial will show you how to do it using JavaScript.

As we know, JavaScript is a scripting language that is used on the client side to add functionality to your web pages. It is used to change the appearance or functionality of a web page by either manipulating the DOM or by adding extra functionality. JavaScript is used to add functionality and interactivity to your web pages. JavaScript can be used to sort the unordered lists alphabetically.

There are many other reasons why you may want to sort alphabetically unsorted HTML unordered elements using JavaScript. Maybe you want to sort the items in a list of products by price so that the cheapest items are at the top. Maybe you want to sort a list of names alphabetically so that the names are in the order that you want.Now it's time to jump into the coding part.

01. HTML
02. CSS
03. Javascript
04. Output Before Sorting
05. Output After Sorting
06. Youtube Video
07. Source Code

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Sort Alphabetically Html Unordered Elements Using JavaScript | Rustcode</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

<div>
  <input type="button" value="Sort" id="btn" onclick="sortFunction()">
  <p><br></p>
  <div id="container">
    <h4><b><u>Fruits List:</u></b></h4>
    <ol>
      <li>Grapes</li>
      <li>Orange</li>
      <li>Apple</li>
      <li>Banana</li>
    </ol>
  </div>
</div>

<script src="script.js"></script>
</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700');

body{
  margin: 0px;
  padding: 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

#container{
  color: #FFF;
  padding: 16px 20px;
  background: rgb(96, 9, 240);
  border-radius: 4px;
  width: 400px;
  font-family: "Poppins";
}

#container > h4{
  margin-bottom: 6px;
}

#container > ol{
  padding-left: 18px;
  margin-top: 6px;
}

#btn{
  cursor: pointer;
  border-radius: 4px;
  color: #FFF;
  outline: none;
  border: none;
  padding: 12px 20px;
  font-weight: 800;
  background: rgb(96, 9, 240);
}

Read Also:

Javascript:

function sortFunction() {
  
    var array = [];
    var items = document.getElementsByTagName("li");
    for (var i = 0, l = items.length; i < l; i++) {
        array.push(items[i].innerHTML)
    }
  
    array.sort();
    for (var i = 0, l = items.length; i < l; i++) {
        items[i].innerHTML = array[i];
    }
}

Output Before Sorting:

Output After Sorting:

Youtube Video:

We also made a youtube video for "Sort Alphabetically Html Unordered Elements Using JavaScript", if you want to watch and want to learn every step of this design.

Source Code:

Before jumping in to download the source code. First, write this code yourself and then you can cross-check it with reference code.

Archive