本教程详细阐述了如何使用JavaScript动态地在同一个`
`元素中添加用户输入的文本内容和一个操作按钮（例如“删除”按钮）。通过`document.createElement()`创建元素，并利用`appendChild()`方法多次将不同类型的子元素（文本节点和按钮元素）添加到同一个父元素中，从而实现功能完整的动态列表项。教程提供了清晰的代码示例和实践建议，帮助开发者构建交互式Web应用。在Web开发中，动态生成用户界面元素是常见的需求，尤其是在构建任务列表、评论区等交互式应用时。一个典型的场景是，用户输入一段文本，系统将其作为一个列表项显示，并同时提供一个操作按钮（如“删除”），允许用户对该列表项进行后续操作。本文将详细指导您如何利用JavaScript的DOM操作来实现这一功能，确保用户输入和操作按钮都能正确地添加到同一个列表项中。
核心概念：appendChild()方法的灵活应用
appendChild()方法是DOM操作中用于将一个节点添加到另一个节点的子节点列表末尾的关键方法。它的一个重要特性是，同一个父元素可以多次调用appendChild()来添加不同的子元素。这意味着，您不仅可以将文本节点添加到
中，还可以将一个按钮元素添加到同一个
中。示例场景：构建一个待办事项列表
我们将通过一个简单的待办事项（Todo List）应用来演示这个过程。用户在一个输入框中键入待办事项，按下Enter键后，该事项会作为一个新的列表项出现在列表中，并且每个列表项旁边都会有一个“删除”按钮。
立即学习“Java免费学习笔记（深入）”；
HTML 结构
首先，我们需要一个基本的HTML结构，包括一个标题、一个用于用户输入的表单以及一个显示待办事项的有序列表。
白瓜AI
白瓜AI，一个免费图文AI创作工具，支持 AI 仿写，图文生成，敏感词检测，图片去水印等等。
下载
todos
在这个结构中：
- #todoForm 是包含输入框的表单。
- #todoInput 是用户输入待办事项的文本框。
- #todoList 是我们将动态添加
- 元素的有序列表。
JavaScript 实现：动态创建与添加元素
接下来是JavaScript部分，它负责处理用户输入、创建新的列表项、添加文本和按钮，并将其呈现在页面上。
function todoListHandler() {
// 1. 获取用户输入
const todoInput = document.getElementById('todoInput');
const itemText = (todoInput as HTMLInputElement).value.trim(); // 获取输入值并去除首尾空格
// 如果输入为空，则不创建新的列表项
if (itemText === '') {
alert('待办事项不能为空！');
return;
}
// 2. 创建新的列表项 ()
const newItem = document.createElement('li');
// 3. 创建文本节点，包含用户输入
const textNode = document.createTextNode(itemText);
// 4. 创建删除按钮 (
