本文详解如何正确使用 DOM 操作将用户输入的待办事项逐行添加到页面中，避免内容挤在同一行的问题，重点修正 insertBefore 用法、ID 唯一性及元素插入目标错误等常见陷阱。
本文详解如何正确使用 dom 操作将用户输入的待办事项逐行添加到页面中，避免内容挤在同一行的问题，重点修正 `insertbefore` 用法、id 唯一性及元素插入目标错误等常见陷阱。
在构建简易待办事项列表时，一个典型需求是：每次点击“Submit”按钮，将输入框中的文本以新段落（ ）形式追加到列表顶部（或底部）
✅ 正确实现方式
核心在于：每次创建全新 元素，并将其插入到容器内（而非 body 或错误节点），同时避免重复 ID
以下是优化后的完整代码逻辑：
function submit() {
const input = document.getElementById("todo_input");
const value = input.value.trim();
// 忽略空输入
if (!value) return;
// 创建新段落元素
const listItem = document.createElement("p");
listItem.textContent = value; // 推荐用 textContent 替代 createTextNode + appendChild，更简洁安全
// 获取目标容器（注意：ID 必须唯一，且需存在）
const outputDiv = document.getElementById("output");
// 插入到容器最前面（即最新项置顶）；若要置底，改用 appendChild(outputDiv, listItem)
outputDiv.insertBefore(listItem, outputDiv.firstChild || null);
// 清空输入框，提升用户体验
input.value = "";
}
? HTML 结构关键点（必须匹配 JS）
<div> <input type="text" id="todo_input" name="todo" placeholder="Enter a task..."> </div> <div class="button-container"> <button onclick="submit()" type="button">Submit</button> </div> <!-- 注意：output 容器需有明确 ID，且包含初始占位元素（可选） --> <div id="output" class="output"> <p id="to-do-txt">— Your tasks will appear here —</p> </div>
⚠️ 重要注意事项：
- ID 唯一性：id="list_display" 在循环创建中不可重复使用，应移除或改用 class；
- 插入目标准确：原代码试图向 document.body 插入文本节点（new_content），而非
元素，且定位节点 currentDiv 未正确定义（HTML 中无 id="output"）；
- 清空输入框：提交后主动清空 input.value，防止重复提交相同内容；
- 空值校验：使用 .trim() 避免仅输入空格也被当作有效任务；
- 安全性：用 textContent 而非 innerHTML 设置内容，防止 XSS 风险。
? 扩展建议（可选）
如需支持删除单条任务，可为每个
添加删除按钮：
const deleteBtn = document.createElement("button");
deleteBtn.textContent = "×";
deleteBtn.onclick = () => listItem.remove();
listItem.appendChild(deleteBtn);
至此，你的待办列表即可稳定实现「每提交一次，新增一行」的效果，结构清晰、语义正确、易于维护。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
