如何在不为每个新项目创建新的 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>
我正在尝试在 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>