时间戳

首页 > 解决方案 > Javascript，追加节点添加整个数组而不是最后一个元素

javascript - Javascript，追加节点添加整个数组而不是最后一个元素

问题描述

所以我仍在学习 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);
    }
}

标签： javascripthtmlarraystextnodecreatetextnode

解决方案

您的updateTaskList函数始终遍历任务列表中的所有任务（通过 for 循环）。

如果您只想添加最后一个元素，您可以

编写一个附加函数，将单个元素添加到 DOM，然后您将在循环和addTask函数内部调用它（在这种情况下，您不会updateTaskList从函数中调用该addTask函数）

或者

从 DOM 中删除所有现有任务，然后添加更新列表的所有任务（就像您现在所做的那样）

推荐阅读