Javascript，追加节点添加整个数组而不是最后一个元素
Posted
技术标签:
【中文标题】Javascript，追加节点添加整个数组而不是最后一个元素【英文标题】：Javascript, append node adds whole array instead of last element 【发布时间】：2021-06-21 17:44:38 【问题描述】：所以我仍在学习 javascript，对于我的第一个待办事项列表项目，我已经到了可以将数组添加到 html 页面的地步，但不是获取最后一个元素并添加它，而是添加了整个数组到每一行。如何更改它以便只添加最后一个元素？
HTML
<!DOCTYPE html>
<html>
<head>
<title>Task Tracker</title>
<link rel="stylesheet" type="text/css" href="todo.css">
<script type="text/javascript" src="todo.js"></script>
</head>
<body>
<div>
<p>Task Manager</p>
<input type="text" name="submitButton" id="userInput">
<button onclick=addTask()>Enter</button>
</div>
<div>
<h3>Task</h3>
<div id='taskList'>
<ul id="myList">
</ul>
</div>
</div>
</body>
</html>
JavaScript
let Task = [];
function addTask()
var newTask = document.getElementById("userInput").value;
Task.push(newTask);
updateTaskList();
;
function updateTaskList()
var node = document.createElement('LI');
var textNode;
for (let i = Task.length - 1; i >= 0; i -= 1)
textNode = document.createTextNode(Task[i]);
console.log(Task[i]);
node.appendChild(textNode);
document.getElementById("myList").appendChild(node);
【问题讨论】：
【参考方案1】：您可以将其合并为一个函数，而不是使用两个函数，代码如下所示
function addTask()
let node = document.createElement("li");
let textNode = document.createTextNode(
document.getElementById("userInput").value
);
node.appendChild(textNode);
document.getElementById("myList").appendChild(node);
顺便说一句，最好不要再使用 var 关键字并将其替换为 let，（或者如果您不重新分配它，则使用 const），因为 let 是块作用域的（大多数情况下它不会问题，但 var 可能有奇怪的问题）
作为奖励，您可以弄清楚如何在用户单击列表项时删除列表项，并添加一个编辑按钮让他们编辑它们
另一个好处是设置一个 localStorage 数组来保存网站的数据，这样当用户重新加载时它会保存他们的列表项
如果你想变得更高级，你会设置一个后端数据库并设置用户身份验证
如果您想更深入地了解编码/javascript，我强烈建议您使用 udemy 课程（但仅在它们打折时）
希望这会有所帮助并祝您编码愉快！
【讨论】：
【参考方案2】：您的 updateTaskList 函数始终遍历任务列表中的所有任务（通过 for 循环）。
如果你只想添加最后一个元素，你要么
编写一个附加函数，将单个元素添加到 DOM，然后您将在循环内和 addTask 函数内调用该函数（在这种情况下，您不会从 addTask 调用 updateTaskListfuntion函数）
或
从 DOM 中删除所有现有任务，然后添加更新列表的所有任务（就像您现在所做的那样）
【讨论】：
【参考方案3】：在 updateTaskList 中，每次都将所有任务附加到新创建的 LI 元素。 尝试仅附加最后一个任务。
function updateTaskList()
var node = document.createElement('LI');
var textNode;
var lastTaskIndex = Task.length - 1;
textNode = document.createTextNode(Task[lastTaskIndex]);
console.log(Task[lastTaskIndex]);
node.appendChild(textNode);
document.getElementById("myList").appendChild(node);
【讨论】：
以上是关于Javascript，追加节点添加整个数组而不是最后一个元素的主要内容，如果未能解决你的问题，请参考以下文章