How to add an icon tag to an li element from vanilla js

Question

I have an unordered list, <ul> and what i am trying to do is, add <li> elements to it from javascript. The li element will contain some text and also a fontawesome icon. This is what I have so far:

function changeSideBar(page) {
  if (page === "files") {
    readCurrentDir("/home/pa/Documents/github").forEach((file) => {
      let filesList = document.getElementById("files-list");
      let li = document.createElement("li");
      if (fs.lstatSync(`/home/pa/Documents/github/${file}`).isDirectory()) {
        let icon = document.createElement("i");
        icon.className = "fa-solid fa-folder";
        li.innerText = `${icon} ${file}`;
      } else {
        li.innerText = file;
      }
      li.style.color = "#e2e8f0";
      filesList.appendChild(li);
    });
  }
}

Answer 1

I solved it myself finally. My solution just in case anyone is stuck with the same problem in the future:

      if (fs.lstatSync(`/home/parth/Documents/github/${file}`).isDirectory()) {
        let icon = document.createElement("i");
        icon.className = "fa-solid fa-folder";
        li.append(icon, file);
      } else {
        li.innerText = file;
      }

instead of adding things to innerHTML use append method