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

Question

我无法制作一个按钮，该按钮将从框中输入的文本放入有序列表中的列表元素。我的教授要求我只使用 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 文档中的按钮时，控制台会告诉我：

未捕获的类型错误：无法读取 null 的属性“appendChild”
在 HTMLButtonElement.main

Answer 1

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

代替

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

试试

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

第二个条件相同，将ol.appendChild改为olGrab.appendChild