Sort a HTML list using Javascript

sort-html-list-with-js-short.js

// Exactly the same thing with less code

const myElement = document.querySelector(".office-list");
const officesArray = Array.from(document.querySelectorAll(".office"));

myElement.innerHTML = ''

officesArray
  .map(element => element.innerHTML)
  .sort()
  .forEach(content => myElement.innerHTML += `<li>${content}</li>`);

sort-html-list-with-js.js

// Select the element with the class of
// office-list and store it in the myElement variable
const myElement = document.querySelector(".office-list");

// Selects all of the elements with class name of "office"
// and store in the officeList variable.
const offices = document.querySelectorAll(".office");
const officesArray = Array.from(offices)

// take some content and add a new list item to myElement
function addListItemToMyElement(content) {
  myElement.innerHTML = myElement.innerHTML + "<li>" + content + "</li>"
}

// take an element and return it's content (innerHTML)
function takeInnerHTML(element) {
  return element.innerHTML
}

// set the content of myElement to be blank
myElement.innerHTML = ''

// Take the innerHTML from each item in the array
// sort it
// then, for each item, as list item to myElement
officesArray
  .map(takeInnerHTML)
  .sort()
  .forEach(addListItemToMyElement);