Javascript 在有序列表中显示输入值时遇到问题

我在制作一个按钮时遇到了问题，这个按钮将把文本从一个框输入到一个有序列表中的列表元素。我的教授要求我只使用createElement、textContent和appendChild（也不能使用jQuery），因此我将文本从输入移动到li的选项非常有限。以下是我目前掌握的情况：

let main = function() {

  if (this.id == "btn1") {
    let listDiv = document.getElementById('div');
    let olCreator = document.createElement('OL');
    div.appendChild(olCreator).setAttribute("id", "ol");
  }

if (this.id == "btn2") {
  let olGrab = document.getElementById('OL');
  let liCreator = document.createElement('LI');
  ol.appendChild(liCreator);
  let inputText = document.getElementById("inputBox").textContent;
  let liDone = document.getElementById('li').appendChild(inputText);
}
};

我很确定我不想给li元素一个id，因为如果我这样做了，输入的文本将进入每个li元素，这将很糟糕。现在，当我按下HTML文档中的按钮时，控制台会告诉我：

未捕获的TypeError:无法读取null的属性“appendChild”
在HTMLButtonElement.main

---

您正在对不存在或值为null的元素调用appendChild

而不是

div.appendChild(olCreator).setAttribute("id", "ol");

试一试

与第二种情况相同，将ol.appendChild更改为olGrab.appendChild

lastDiv.appendChild(olCreator).setAttribute("id", "ol");