使用javascript从输入数组创建HTML列表

Question

尽管我在解决方案中看到了类似的问题，但是我仍然无法通过代码解决问题。有人可以帮忙研究一下，告诉我我做错了什么。我正在尝试使用数组函数将用户输入添加到列表中。我想在用户输入之前在数组中已有3个元素，然后再使用另一种数组方法删除添加的输入。但首先要增加投入是我的挑战。我已添加我的代码以供查看。

    var domTarget = id => {
  return document.getElementById(id);
};
var UnsortedTrees = ["spruce", "pine", "cedar"];
let ordered = document.createElement("ol");
domTarget("tree-display").appendChild(ordered);
UnsortedTrees.forEach(Unsortedtree => {
  let listOfTrees = document.createElement("li");
  ordered.appendChild(listOfTrees);
  listOfTrees.innerHTML += Unsortedtree;
});

const frontAdd = () => {
  console.log(UnsortedTrees);
  let userInput = domTarget("array-input").value;
  var isValid = true;
  if (userInput === "") {
    alert("Please enter a tree name");
    isValid = false;
  }
  if (userInput) {
    UnsortedTrees.push(userInput);
    domTarget("tree-display").reset();
    let ordered = document.createElement("ol");
    domTarget("tree-display").appendChild(ordered);
    UnsortedTrees.forEach(Unsortedtree => {
      let listOfTrees = document.createElement("li");
      ordered.appendChild(listOfTrees);
      listOfTrees.innerHTML += Unsortedtree;
    });
  }
};

window.onload = () => {
   domTarget("front-add").onclick = frontAdd;
};

Answer 1

重构了一点代码。这就是你的意思吗？

(() => {
  const byId = id => document.querySelector(`#${id}`);
  const appendListItem = (orderedList, itemTxt) => {
    let listItem = document.createElement("li");
    listItem.textContent = itemTxt;
    orderedList.appendChild(listItem);
  };
  const addItem = () => {
    const inputEl = byId("array-input");
    const val = inputEl.value.trim();
  
    if (!val) { return alert("Please enter a tree name"); }

    UnsortedTrees.push(val);
    appendListItem(ordered, val);
    inputEl.value = "";
  };
  
  let UnsortedTrees = ["spruce", "pine", "cedar"];
  const ordered = document.createElement("ol");
  UnsortedTrees.forEach(item => appendListItem(ordered, item));
  byId("tree-display").appendChild(ordered);
  document.querySelector("button").addEventListener("click", addItem);
})();

<div id="tree-display"></div>
<input id="array-input" type="text" placeholder="type a tree name"> 
<button id="addItem">Add</button>