如何在不为每个新项目创建新的 ul 元素的情况下创建新的列表元素 i javascript

How to create a new list element i javascript without creating new ul-elements for each new item

我正在尝试在 javascript 中创建任务列表。我希望用户能够将新列表项添加为任务,但我不知道下一步该怎么做...

所以我的问题如下:

对于用户提供的每个新输入,新的 ul 元素不断创建,而不是将 li 元素添加到 ul 元素,而只包含一个 li 元素。如何将 li 元素添加到同一个 ul 元素,而不为每个新创建的 task/input 创建新的 ul 元素?

这是html和javascript代码:

<html>
<body>
<div id="createNewTaskContainer">
<form id="taskForm">
<input id="taskInput" type="text" />
<button type="submit" id="createTaskButton">Add</button>
</form>
</div>
<div id="listOfTasksContainer"></div>
</body>
</html>

let toDoList = [];
    
window.onload = function () {
let form = document.getElementById("taskForm");
form.addEventListener("submit", addTask); }
    
function insertTasksInHtml() {
let liElement = document.createElement("li");
let ulElement = document.createElement("ul");
    
ulElement.appendChild(liElement);
      document.getElementById("listOfTasksContainer").innerHTML = "";
      document.getElementById("listOfTasksContainer").appendChild(ulElement);
console.log(ulElement);
    
for (let i = 0; i < toDoList.length; i++) {
liElement.innerText = toDoList[i];
}
}

function addTask(e) {
e.preventDefault();
    
let taskInput = document.getElementById("taskInput").value; 
    
if (taskInput === "") {
alert("Please insert a task before you submit");
} else {
toDoList.push(taskInput);
insertTasksInHtml();
}
}

在循环内创建 liElement 并附加到 Ul

function insertTasksInHtml() {

   let ulElement = document.createElement("ul");
    
 document.getElementById("listOfTasksContainer").innerHTML = "UL";
 document.getElementById("listOfTasksContainer").appendChild(ulElement);
 //console.log(ulElement);
    
for (let i = 0; i < 10; i++) {
   let liElement = document.createElement("li");
   liElement.innerText = 'LI ' + i;
   ulElement.appendChild(liElement);
 }
}

insertTasksInHtml();
<div id="listOfTasksContainer">
</div>

let toDoList = [];
    
window.onload = function () {

let ulElement;
let node;
let textnode;
let form = document.getElementById("taskForm");
form.addEventListener("submit", addTask); }
    
function insertTasksInHtml(newTask) {
  ulElement = document.getElementById("list");
  node = document.createElement("li");  
  textnode = document.createTextNode(newTask);     
  node.appendChild(textnode);    
  ulElement.appendChild(node);                   
}

function addTask(e) {
  e.preventDefault();
    
  let taskInput = document.getElementById("taskInput").value; 
    
  if (taskInput === "") {
    alert("Please insert a task before you submit");
  } else {
    toDoList.push(taskInput);
    insertTasksInHtml(taskInput);
  }
}
<html>
<body>
<div id="createNewTaskContainer">
<form id="taskForm">
<input id="taskInput" type="text" />
<button type="submit" id="createTaskButton">Add</button>
</form>
</div>
<div id="listOfTasksContainer">
<ul id="list">

</ul>
</div>
</body>
</html>