本教程详细介绍了如何使用JavaScript动态创建HTML列表项（`
理解需求：动态构建列表项
在现代Web应用中，我们经常需要根据用户的交互或数据变化来动态生成和更新页面内容。一个常见的场景是创建待办事项列表，用户输入一项任务后，页面上不仅要显示该任务文本，还要提供一个操作按钮（例如“删除”），以便用户能够管理这些任务。核心挑战在于如何将用户输入的文本内容和这个操作按钮都封装在同一个列表项（
HTML 结构准备
首先，我们需要一个基础的HTML结构来承载我们的待办事项应用。这包括一个输入框用于接收用户输入，一个表单用于提交，以及一个有序列表（
- ）来显示动态生成的待办事项。
动态待办事项列表
我的待办事项
在这个结构中：
立即学习“Java免费学习笔记（深入）”；
- 是用户输入任务文本的地方。
- 是我们将动态添加
- 元素的容器。
JavaScript 核心实现：创建与追加元素
实现动态添加列表项的关键在于使用JavaScript的DOM操作方法，特别是document.createElement()用于创建新元素，以及element.appendChild()用于将子元素添加到父元素中。
我们将通过以下步骤实现目标：
- 阻止表单默认提交： 表单提交会刷新页面，这不是我们期望的行为。
- 获取用户输入： 从输入框中获取用户键入的文本。
-
创建
- 元素：
作为新的列表项容器。 - 创建文本节点： 将用户输入文本转换为一个文本节点。
- 创建按钮元素： 创建一个“删除”按钮。
-
将文本节点和按钮追加到
- ：
这是解决问题的核心步骤。 -
将完整的
- 追加到列表容器：
使其在页面上可见。 - 清空输入框： 方便用户输入下一个任务。
增强交互：添加删除功能
为了让待办事项列表功能完整，我们还需要为每个动态创建的“删除”按钮添加事件监听器，使其能够移除对应的列表项。
完整的 JavaScript 代码示例
// app.js
document.addEventListener('DOMContentLoaded', () => {
// 获取DOM元素
const todoForm = document.getElementById('todoForm');
const todoInput = document.getElementById('todoInput');
const todoList = document.getElementById('todoList');
// 监听表单提交事件
todoForm.addEventListener('submit', (e) => {
e.preventDefault(); // 阻止表单默认提交行为，防止页面刷新
const itemText = todoInput.value.trim(); // 获取并清理输入值（去除首尾空格）
// 简单的输入验证
if (itemText === '') {
alert('请输入待办事项内容！');
return; // 如果输入为空，则不执行后续操作
}
// 1. 创建新的列表项 
