如何用JavaScript将数组元素插入HTML文档？代码无法更新内容求助

云上老周

2026-8-7

解决To-Do列表点击按钮后任务不显示的问题

你的代码存在两个关键问题导致任务无法正常显示，下面逐一说明并给出修正方案：

错误1：获取元素方式错误

document.getElementsByClassName('taskLists')返回的是HTMLCollection集合，而非单个DOM元素。直接给集合赋值innerHTML不会生效，必须通过索引获取具体元素（比如第一个匹配项）。

错误2：HTML标签使用实体字符无法解析

拼接HTML时使用的<和>是HTML实体字符，浏览器会将其视为普通文本显示，而不是解析为<li>、<ul>这类DOM标签，应该直接使用<和>。

修正后的JS代码

var taskList = [];

var input = document.getElementById('takeInput');
var button = document.getElementById('addInput');
// 提前获取目标元素，避免每次点击重复查询DOM
var taskContainer = document.getElementsByClassName('taskLists')[0];

button.onclick = function(){
    var nHTML = '';
    var userEnteredText = input.value.trim();
    // 避免添加空任务
    if (!userEnteredText) return;
    
    taskList.push(userEnteredText);
    taskList.forEach(function(task){
        nHTML += '<li>' + task + '</li>';
    });
    taskContainer.innerHTML = '<ul>' + nHTML + '</ul>';
    // 添加后清空输入框，优化体验
    input.value = '';
}