如何在 javascript 中创建新的列表元素而不为每个新项目创建新的 ul 元素
我正在尝试用 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();
}
}
森栏2回答
-
慕娘9325324
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> -
万千封印
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>
随时随地看视频慕课网APP
相关分类
JavaScript