这个javasScript排序功能正确吗？

如何解决这个javasScript排序功能正确吗？

我是一个JavaScript初学者。该功能有效，并允许我通过单击按钮来按升序和降序对列表进行排序，但是我想知道它是否正确编写，或者可以简化或以其他方式编写。预先感谢。

index.html

<p id="sort">Sort</p>
<ul>
  <li>Phosphorus</li>
  <li>Polonium</li>
  <li>Radium</li>
  <li>Fluorine</li>
  <li>Iron</li>
  <li>Hydrogen</li>
  <li>Germanium</li>
  <li>Mercury</li>
  <li>Actinium</li>
  <li>Barium</li>
  <li>Calcium</li>
  <li>Cadmium</li>
</ul>
<script src="main.js"></script>

main.js

const sortButton = document.querySelector("#sort");
let counter = 0;


eventListeners();

function eventListeners() {
   sortButton.addEventListener("click",sortList);
}

function sortList() {
   const elementsList = new Array();
   const elements = document.querySelectorAll("ul li");
   for (const element of elements) {
       elementsList.push(element.textContent);
   }
   const ul = document.querySelector("ul");
   ul.innerHTML = "";

   if (counter % 2 === 0) {
       const orderedList = elementsList.sort();
       for (let i = 0; i < orderedList.length; i++) {
           const li = document.createElement("li");
           li.innerHTML = orderedList[i];
           ul.appendChild(li);
       }
       counter++;
   } else {
       const orderedList = elementsList.reverse();
       for (let i = 0; i < orderedList.length; i++) {
           const li = document.createElement("li");
           li.innerHTML = orderedList[i];
           ul.appendChild(li);
       }
       counter++;
   }
}

解决方法

您不必清除ul的innerHTML，甚至不必使用innerHTML

element.appendChild将移动现有元素-如下

const sortButton = document.querySelector("#sort");
let counter = 0;
eventListeners();

function eventListeners() {
   sortButton.addEventListener("click",sortList);
}

function sortList() {
   const elementsList = Array.from(document.querySelectorAll("ul li"));
   const ul = document.querySelector("ul");
   elementsList.sort(({textContent:a},{textContent:b})=>(counter%2?-1:1)*a.localeCompare(b))
   .forEach(el => ul.appendChild(el));
   counter++;
}

<p id="sort">Sort</p>
<ul>
  <li>Phosphorus</li>
  <li>Polonium</li>
  <li>Radium</li>
  <li>Fluorine</li>
  <li>Iron</li>
  <li>Hydrogen</li>
  <li>Germanium</li>
  <li>Mercury</li>
  <li>Actinium</li>
  <li>Barium</li>
  <li>Calcium</li>
  <li>Cadmium</li>
</ul>

在Es2015中（即老式Javascirpt）-此函数如下：

function sortList() {
  var elementsList = Array.from(document.querySelectorAll("ul li"));
  var ul = document.querySelector("ul");
  elementsList.sort(function (_ref,_ref2) {
    var a = _ref.textContent;
    var b = _ref2.textContent;
    return (counter % 2 ? -1 : 1) * a.localeCompare(b);
  }).forEach(function (el) {
    return ul.appendChild(el);
  });
  counter++;
}