JavaScript DOM操作：动态创建包含文本和交互按钮的列表项-html教程-PHP中文网

JavaScript DOM操作：动态创建包含文本和交互按钮的列表项

DDD

发布： 2025-10-12 12:22:39

原创

562人浏览过

JavaScript DOM操作：动态创建包含文本和交互按钮的列表项

本文将指导如何在javascript中通过dom操作，动态创建包含用户输入文本和删除按钮的列表项（`

`），并将其添加到html页面。通过详细的代码示例，您将学会如何有效地将多个元素（文本节点和按钮元素）添加到同一个父元素中，从而实现交互式待办事项列表等功能。

引言：动态构建交互式列表项

在现代Web开发中，通过JavaScript动态操作文档对象模型（DOM）是实现丰富用户界面的核心技术之一。无论是构建待办事项列表、评论区还是其他需要用户交互的动态内容，我们经常需要创建新的HTML元素，并向其中添加文本、按钮或其他组件。一个常见的需求是，当用户输入内容后，不仅要显示其文本，还要提供一个与之关联的操作按钮（例如“删除”），并将它们同时包含在同一个父元素中，如一个列表项（<li>）。

核心概念解析：DOM元素创建与追加

在深入实现之前，我们先回顾几个关键的DOM操作方法：

document.createElement(tagName)：用于创建一个指定标签名称的HTML元素节点。例如，document.createElement('li') 将创建一个 <li> 元素。
document.createTextNode(data)：用于创建一个文本节点。例如，document.createTextNode('我的待办事项') 将创建一个包含“我的待办事项”文本的节点。
parentNode.appendChild(childNode)：将一个节点作为最后一个子节点添加到父节点。这个方法非常灵活，可以多次调用，将多个子节点依次追加到同一个父节点中。

理解 appendChild 可以多次调用的特性是解决本文问题的关键。

问题场景：如何同时添加文本和按钮？

假设我们正在开发一个简单的待办事项应用，用户可以在输入框中输入计划，然后按回车键或提交表单后，该计划会作为列表项显示。每个列表项不仅要显示用户输入的内容，还应带有一个“删除”按钮。

立即学习“Java免费学习笔记（深入）”；

以下是初始的HTML结构：

<h1 class="title">todos</h1>
<form id="todoForm">
    <button id="scrolldown-menu-toggle">˅</button>
    <input type="text" id="todoInput" placeholder="Fill in your plan">
</form>
<ol id="todoList"></ol>

登录后复制

以及一个尝试实现此功能的JavaScript片段：

酷表ChatExcel

北大团队开发的通过聊天来操作Excel表格的AI工具

查看详情

function todoList(){
    const item: string = (<HTMLInputElement>document.getElementById('todoInput')).value;
    const text = document.createTextNode(item);
    const newItem = document.createElement('li');

    const button: any = document.createElement("button");
    button.innerHTML = 'Delete';

    newItem.appendChild(text); // 这里只追加了文本节点

    // @ts-ignore
}

const form = (<HTMLInputElement>document.getElementById('todoForm'));
form.addEventListener("submit", (e) => {
    e.preventDefault();
    // todoList(); // 实际调用 todoList 函数
});

登录后复制

在上述JavaScript代码中，我们创建了 <li> 元素 (newItem)，创建了文本节点 (text)，并将其追加到了 newItem。我们也创建了 button 元素，并设置了其文本。然而，button 元素并没有被追加到 newItem 中。因此，当 todoList 函数执行后，页面上只会显示用户输入的文本，而不会有“删除”按钮。

解决方案：追加多个子元素到同一父元素

解决这个问题的方法非常直接：只需要在 newItem.appendChild(text) 之后，再调用一次 newItem.appendChild(button) 即可。

function todoList(){
   const item: string = (<HTMLInputElement>document.getElementById('todoInput')).value;
   const text = document.createTextNode(item);
   const newItem = document.createElement('li');

   const button: any = document.createElement("button");
   button.innerHTML = 'Delete';

   newItem.appendChild(text); // 追加文本节点
   newItem.appendChild(button); // <--- 关键：追加按钮元素到同一个 li

   // @ts-ignore
}

登录后复制

通过添加 newItem.appendChild(button) 这一行，我们确保了 button 元素也被正确地添加到了 <li> 元素内部，使其成为 <li> 的一个子元素。

构建完整且功能完善的待办事项列表

为了提供一个完整的、可运行的示例，我们不仅要解决按钮的追加问题，还要完善待办事项列表的整体逻辑，包括将 <li> 添加到 <ul> 或 <ol> 容器中，以及为“删除”按钮添加实际的删除功能。

HTML 结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项列表</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        #todoForm { display: flex; margin-bottom: 20px; }
        #todoInput { flex-grow: 1; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
        #todoForm button { margin-left: 10px; padding: 8px 15px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
        #todoForm button:hover { background-color: #0056b3; }
        #todoList { list-style: none; padding: 0; }
        #todoList li { display: flex; justify-content: space-between; align-items: center; padding: 10px; border: 1px solid #eee; margin-bottom: 8px; border-radius: 4px; background-color: #f9f9f9; }
        #todoList li button { background-color: #dc3545; color: white; border: none; padding: 5px 10px; border-radius: 3px; cursor: pointer; }
        #todoList li button:hover { background-color: #c82333; }
    </style>
</head>
<body>
    <h1 class="title">我的待办事项</h1>
    <form id="todoForm">
        <input type="text" id="todoInput" placeholder="填写你的计划...">
        <button type="submit">添加</button>
    </form>
    <ol id="todoList"></ol>

    <script src="app.js"></script>
</body>
</html>

登录后复制

JavaScript 实现 (app.js)

// 获取DOM元素
const todoInput = <HTMLInputElement>document.getElementById('todoInput');
const todoForm = <HTMLFormElement>document.getElementById('todoForm');
const todoListContainer = <HTMLOListElement>document.getElementById('todoList');

/**
 * 添加新的待办事项到列表
 */
function addTodoItem() {
    const itemText = todoInput.value.trim(); // 获取输入值并去除首尾空格

    // 检查输入是否为空
    if (itemText === "") {
        alert("待办事项不能为空！");
        return;
    }

    // 1. 创建新的列表项 <li>
    const newItem = document.createElement('li');

    // 2. 创建文本节点，包含用户输入的内容
    const textNode = document.createTextNode(itemText);
    newItem.appendChild(textNode); // 将文本节点追加到 <li>

    // 3. 创建删除按钮
    const deleteButton = document.createElement("button");
    deleteButton.innerHTML = '删除'; // 设置按钮文本

    // 为删除按钮添加点击事件监听器
    deleteButton.onclick = function() {
        newItem.remove(); // 当按钮被点击时，移除整个 <li> 元素
    };
    newItem.appendChild(deleteButton); // 将删除按钮追加到同一个 <li>

    // 4. 将完整的 <li> 追加到 <ol> 容器中
    todoListContainer.appendChild(newItem);

    // 5. 清空输入框，以便用户输入下一个事项
    todoInput.value = '';
    todoInput.focus(); // 重新聚焦输入框
}

// 监听表单的提交事件
todoForm.addEventListener("submit", (e) => {
    e.preventDefault(); // 阻止表单的默认提交行为（页面刷新）
    addTodoItem(); // 调用添加待办事项的函数
});

登录后复制

在这个完整的示例中，addTodoItem 函数负责创建 <li>、文本节点和“删除”按钮，并将文本节点和按钮都追加到 <li> 中。然后，这个完整的 <li> 被追加到 <ol id="todoList"> 容器中。同时，我们为“删除”按钮添加了 onclick 事件，使其能够移除其父级 <li> 元素，实现了待办事项的删除功能。表单的 submit 事件监听器则确保在用户提交表单时调用 addTodoItem 函数，并阻止页面刷新。

注意事项与最佳实践

输入验证：在添加内容前，检查用户输入是否为空或仅包含空格，可以提升用户体验。
清空输入框：成功添加内容后清空输入框，并可选地重新聚焦，方便用户继续输入。
事件处理：
- 对于动态创建的元素（如本例中的“删除”按钮），可以直接在创建时绑定事件监听器。
- 对于大量动态生成的元素，考虑使用事件委托（Event Delegation）是一种更高效的模式。这意味着将事件监听器绑定到它们的共同父元素上，然后通过事件冒泡和 event.target 来判断是哪个子元素触发了事件。
TypeScript 类型断言：在TypeScript环境中，当通过 document.getElementById() 获取元素时，通常需要使用类型断言（如 <HTMLInputElement> 或 <HTMLFormElement>）来明确元素的具体类型，以便访问其特有的属性和方法（如 .value 或 .addEventListener）。
性能考量：虽然本例中直接操作DOM是可行的，但在处理大量数据或频繁DOM操作时，考虑使用文档片段（DocumentFragment）来批量添加元素，减少页面重绘，或使用现代前端框架（如React, Vue, Angular）来优化DOM更新。

总结

通过本教程，我们学习了如何在JavaScript中利用 document.createElement()、document.createTextNode() 和 element.appendChild() 方法动态创建HTML元素。关键在于理解 appendChild() 可以多次用于同一个父元素，从而允许我们将多个子元素（如文本节点和按钮元素）有效地组合到单个父元素（如 <li>）中。结合事件监听器，我们可以构建出功能强大且交互性强的Web界面，如本例中的待办事项列表。掌握这些基本的DOM操作是进行前端开发的基础。

以上就是JavaScript DOM操作：动态创建包含文本和交互按钮的列表项的详细内容，更多请关注php中文网其它相关文章！