How do I sort html list alphabetically using javascript on page load-CodePudding

I have an unordered list on my page. I will be adding more names to it continuously, so I want the list to be sorted alphabetically on page load.

Here is what I have done so far but it is not working.

What is wrong here, how can I make this script sort the list alphabetically?

function sort() {

  // Declaring Variables
  var MY_list, i, run, li, stop;

  // Taking content of list as input
  MY_list = document.getElementById("MYList");

  run = true;

  while (run) {
    run = false;
    li = MY_list.getElementsByTagName("LI");

    // Loop traversing through all the list items
    for (i = 0; i < (li.length - 1); i  ) {
      stop = false;
      if (li[i].innerHTML.toLowerCase() >
        li[i   1].innerHTML.toLowerCase()) {
        stop = true;
        break;
      }
    }

    /* If the current item is smaller than
    the next item then adding it after
    it using insertBefore() method */
    if (stop) {
      li[i].parentNode.insertBefore(
        li[i   1], li[i]);

      run = true;
    }
  }
}
sort()

<div style="text-align: left;">
  <title> Sort a list alphabetically Using JavaScript </title>
  <h2 style="text-align: center;"> On pageload,&nbsp; sort the below list </h2>
  <ul style="color: crimson; list-style-type: none; list-style-image: none; list-style-position: 
    outside;" id="MYList">
    <li>Fish</li>
    <li>Cat</li>
    <li>Animal</li>
    <li>Dog</li>
    <li>Bird</li>
    <li>Eagle</li>
    <li>Home</li>
  </ul>
</div>
<hr/>
<div style="text-align: center;">
  <div style="text-align: center;">
    <dl>
      <dt><big><big><big><a
    style="text-decoration: none;" href="A-LIST.html">A</a>
    <a style="text-decoration: none;" href="B-LIST.html">B</a>
    <a style="text-decoration: none;" href="C-LIST.html">C</a>
    <a style="text-decoration: none;" href="D-LIST.html">D</a>
    <a style="text-decoration: none;" href="E-LIST.html">E</a>
    <a style="text-decoration: none;" href="F-LIST.html">F</a>
    <a style="text-decoration: none;" href="G-LIST.html">G</a>
    <a style="text-decoration: none;" href="H-LIST.html">H</a>
    <a style="text-decoration: none;" href="I-LIST.html">I</a>
    <a style="text-decoration: none;" href="J-LIST.html">J</a>
    <a style="text-decoration: none;" href="K-LIST.html">K</a>
    <a style="text-decoration: none;" href="L-LIST.html">L</a>
    <a style="text-decoration: none;" href="M-LIST.html">M</a>
    <a style="text-decoration: none;" href="N-LIST.html">N</a>
    <a style="text-decoration: none;" href="O-LIST.html">O</a>
    <a style="text-decoration: none;" href="P-LIST.html">P</a>
    <a style="text-decoration: none;" href="Q-LIST.html">Q</a>
    <a style="text-decoration: none;" href="R-LIST.html">R</a>
    <a style="text-decoration: none;" href="S-LIST.html">S</a>
    <a style="text-decoration: none;" href="T-LIST.html">T</a>
    <a style="text-decoration: none;" href="U-LIST.html">U</a>
    <a style="text-decoration: none;" href="V-LIST.html">V</a>
    <a style="text-decoration: none;" href="W-LIST.html">W</a>
    <a style="text-decoration: none;" href="X-LIST.html">X</a>
    <a style="text-decoration: none;" href="Y-LIST.html">Y</a>
    <a style="text-decoration: none;" href="Z-LIST.html">Z</a></big></big></big></dt>
    </dl>
  </div>
</div>

CodePudding user response：

You did not actually call the sort()

Using spread and a normal sort with a sort function you can shorten your sorting considerable

const sortList = list => [...list].sort((a, b) => {
  const A = a.textContent, B = b.textContent;
  return (A < B) ? -1 : (A > B) ? 1 : 0;
});


window.addEventListener("load", function() {
  const ul = document.getElementById("MYList");
  const list = ul.querySelectorAll("li");
  ul.append(...sortList(list));
})

h2 {
  text-align: center;
}

#MYList {
  color: crimson;
  list-style-type: none;
  list-style-image: none;
  list-style-position: outside;
}

<div>
  <title> Sort a list alphabetically Using JavaScript </title>
  <h2> On pageload,&nbsp; sort the below list </h2>
  <ul id="MYList">
    <li>Fish</li>
    <li>Cat</li>
    <li>Animal</li>
    <li>Dog</li>
    <li>Bird</li>
    <li>Eagle</li>
    <li>Home</li>
  </ul>
</div>

CodePudding user response：

Maybe this is my Angular approach speaking, but I would do it this way :

Read your list and store all the names in an array
Clear the HTML list
Sort the JS list
Rebuild the list from the sorted array

let names = [];
const elems = document.getElementsByTagName("li");

for(let elem of elems){
  names.push(elem.innerHTML);
}

MYList.innerHTML="";
names.sort();

for(let name of names){
  MYList.innerHTML  = `<li>${name}</li>`
}

<ul id="MYList">
    <li>Fish</li>
    <li>Cat</li>
    <li>Animal</li>
    <li>Dog</li>
    <li>Bird</li>
    <li>Eagle</li>
    <li>Home</li>
</ul>

Of course, a cleverer approach would be to not have the list already hardcoded in HTML, but stored in an array in JS, and use this array to build your view (again, Angular habit)