如何使我的 Javascript 待办事项列表中的任务出现在新列表项上？

Question

我正在尝试使用 JavaScript（和 HTML/CSS）制作待办事项列表，并设法使添加按钮使用以下代码：

function addTask() {
  let task = document.querySelector("li");
  let inputVal = document.getElementById("task").value;
  task.innerHTML = inputVal;
}

但是，每当我在输入中写入内容并按下添加按钮时，相同的列表元素都会更改，而不是出现在新的列表元素上。 有谁知道如何更改它或添加代码以便新任务出现在新列表元素上？ 我的 HTML 代码如下：

<h1>To-Do List</h1>
    <h2>Today</h2>
    <ul>
        <li id="list"></li>
        <li id="list"></li>
        <li id="list"></li>
        <li id="list"></li>
        <li id="list"></li>
     </ul>
    <input type="text" id="task" value=""> <br>
    <button onclick="addTask()" type="button" id="add">Add task</button>

Answer 1

我认为你需要像这样修改：

function addTask() {
  let task = document.createElement("li");
  let inputVal = document.getElementById("task").value;
  let todo = document.getElementById("todo");
  task.innerHTML = inputVal;
  todo.appendChild(task);
}

和你的 html 代码

<h1>To-Do List</h1>
<h2>Today</h2>
<ul id="todo"></ul>
<input type="text" id="task" value=""> <br>
<button onclick="addTask()" type="button" id="add">Add task</button>