本文讲解如何使用 javascript 数组存储待办事项，并通过循环动态渲染到页面中，重点解决因未清空容器导致的重复渲染问题，并提供更优的实现方案。
本文讲解如何使用 javascript 数组存储待办事项，并通过循环动态渲染到页面中，重点解决因未清空容器导致的重复渲染问题，并提供更优的实现方案。
在构建一个基于数组和循环的待办事项（Todo List）应用时，一个常见错误是：每次添加新任务后，整个列表被重复追加——即已有任务反复出现，新任务叠加其后。这并非逻辑错误，而是 DOM 操作方式不当所致：result.innerHTML += html 是累加式写入，若不重置容器内容，历史项会持续保留并随每次调用被再次渲染。
✅ 正确做法：每次渲染前清空容器
关键修复点在于：在 for 循环开始前，将 .todo-list 容器的 innerHTML 重置为空字符串：
function handleAddTodo() {
const todoInput = document.querySelector('.js-input-todo');
const todoValue = todoInput.value.trim();
const todoContainer = document.querySelector('.todo-list');
// 防止空输入
if (!todoValue) return;
// ✅ 关键修复：先清空容器，再重新渲染全部数据
todoContainer.innerHTML = '';
// 添加新任务到数组
names.push(todoValue);
// 重新遍历整个数组，生成完整 HTML
for (let i = 0; i < names.length; i++) {
const html = `<p>${names[i]}</p>`;
todoContainer.innerHTML += html;
}
// 清空输入框
todoInput.value = '';
}这样，每次点击“Add”时，程序都会：
- 清空
.todo-list； - 将新任务加入
names数组； - 完整重绘整个列表（含新增项），确保视图与数据严格一致。
⚠️ 注意事项与优化建议
-
避免在循环中反复读写
innerHTML：频繁修改innerHTML会触发多次 DOM 重排，影响性能。更推荐先拼接完整 HTML 字符串，再一次性写入：let html = ''; for (let i = 0; i < names.length; i++) { html += `<p>${names[i]}</p>`; } todoContainer.innerHTML = html; // ✅ 单次写入，高效可靠 -
无需循环？仅追加最新项即可
若你只希望“添加新任务”而非“刷新全量列表”，可跳过循环，直接追加最后一项：const latestTodo = names[names.length - 1]; todoContainer.innerHTML += `<p>${latestTodo}</p>`;此方式更轻量，但前提是列表状态完全由用户操作驱动（无删除、编辑等交互）。
补充健壮性：增加空值校验、输入去空格（
.trim()）、回车提交支持等，可大幅提升用户体验。
✅ 完整可运行示例（精简版）
<body>
<p class="title">Todo List</p>
<input type="text" class="js-input-todo" placeholder="Todo name">
<button type="submit" class="js-btn-todo" onclick="handleAddTodo()">Add</button>
<div class="todo-list"></div>
<script>
const names = [];
function handleAddTodo() {
const input = document.querySelector('.js-input-todo');
const value = input.value.trim();
const container = document.querySelector('.todo-list');
if (!value) return;
names.push(value);
input.value = '';
// ✨ 一次性生成全部 HTML 并写入
const html = names.map(name => `<p>${name}</p>`).join('');
container.innerHTML = html;
}
</script>
</body>? 提示：初学者推荐使用 VS Code 等现代 IDE，开启 Prettier 自动格式化与 ESLint 实时校验，能显著提升代码可读性与健壮性。
通过理解「数据驱动视图」的核心思想——即每次状态变更后，以当前数据为唯一依据生成视图——你就能避开重复渲染陷阱，并为后续引入删除、完成标记等功能打下坚实基础。
