我正在嘗試用 JavaScript 創建一個任務列表。我希望用戶能夠添加新的列表項作為任務，但我不知道下一步該怎么做......所以我的問題如下：對于用戶給出的每個新輸入，新的 ul 元素不會將 li 元素添加到 ul 元素，而是繼續創建僅包含一個 li 元素。如何將 li 元素添加到同一個 ul 元素，而不為創建的每個新任務/輸入創建新的 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();}}
如何在 javascript 中創建新的列表元素而不為每個新項目創建新的 ul 元素
森欄
2023-07-06 16:53:46
