循环添加数组元素时内容合并显示的问题排查与解决

问题原因 #

1. 重复使用同一个<li>元素：你只在循环外创建了一个<li>节点，后续循环里一直往这个节点里追加内容，所有任务文本都会堆在这一个li里。
2. DOM元素不能重复添加：每次执行ul.appendChild(li)时，浏览器不会复制这个li，只会把它从当前位置移动到ul的末尾，所以最终ul里只会有这一个li，里面包含所有任务内容。
3. 额外问题：任务分类时没有处理大小写差异，原数组里的tipo有"Urgente"和"urgente"，会导致部分紧急任务被误分类。

解决方案 #

1. 修正任务分类的大小写问题 #

统一转成小写判断，避免大小写不一致导致的分类错误：

let tasks = [
    { titulo: "Comprar comida para o gato", tipo: "Urgente" },
    { titulo: "Limpar o quarto", tipo: "urgente" },  
    { titulo: "Consertar Computador", tipo: "prioritário" },  
    { titulo: "Guardar dinheiro do lanche", tipo: "Urgente" },  
    { titulo: "Beber água", tipo: "prioritário" },    
    { titulo: "Alongamento", tipo: "prioritário" }, 
]

let prioritário = []
let urgente = []

for (let i = 0; i < tasks.length; i++) {
    const tipo = tasks[i].tipo.toLowerCase()
    if (tipo === "prioritário") {
        prioritário.push(tasks[i].titulo)
    } else if (tipo === "urgente") {
        urgente.push(tasks[i].titulo)
    }
}

2. 为每个任务创建独立的<li>元素 #

在循环内部创建新的<li>，确保每个任务对应一个独立列表项：

let ul = document.querySelector('ul')

// 先清空原有列表内容（可选，根据需求保留或移除原有"ok"项）
ul.innerHTML = ''

// 优先添加urgente类型任务
for (let i = 0; i < urgente.length; i++) {
    let li = document.createElement('li')
    li.textContent = urgente[i]
    ul.appendChild(li)
}

// 再添加prioritário类型任务
for (let i = 0; i < prioritário.length; i++) {
    let li = document.createElement('li')
    li.textContent = prioritário[i]
    ul.appendChild(li)
}

简化写法（可选） #

用数组的forEach方法可以让代码更简洁：

let ul = document.querySelector('ul')
ul.innerHTML = ''

// 处理urgente任务
urgente.forEach(task => {
    const li = document.createElement('li')
    li.textContent = task
    ul.appendChild(li)
})

// 处理prioritário任务
prioritário.forEach(task => {
    const li = document.createElement('li')
    li.textContent = task
    ul.appendChild(li)
})

内容的提问来源于stack exchange，提问作者newuser123