按钮点击生成带复选框的有序列表

本文手把手教你用现代JavaScript打造一个安全、高效且体验出色的动态有序列表：通过addEventListener解耦事件逻辑，用textContent替代innerHTML杜绝XSS风险，结合CSS类实现复选框勾选即显删除线的视觉反馈，并兼顾键盘操作兼容性与语义化DOM结构——代码简洁可维护，功能扎实易扩展，是前端新手进阶与老手优化实践的实用范例。

本文讲解如何使用现代 JavaScript（addEventListener）为按钮绑定点击事件，动态向有序列表添加带复选框的列表项，并通过 CSS 类实现勾选后文字删除线效果，同时规避 innerHTML 安全风险与内联事件的维护缺陷。

要构建一个功能完整、可维护性强的动态有序列表，需兼顾结构清晰性、代码安全性与交互响应性。核心在于三点：解耦事件绑定逻辑、安全插入文本内容、封装复选框交互行为。

首先，移除 HTML 中的 onclick="addToList()" 内联事件——它违反关注点分离原则，难以调试且无法批量管理事件。应改用 addEventListener() 在 JS 中统一注册：

document.querySelector("#button1").addEventListener("click", addToList);

其次，优化 DOM 元素获取方式：将 textInput 和 checkboxList 的 getElementById 调用移至函数外部，仅执行一次，避免重复查询提升性能。

在 addToList 函数中，关键改进包括：

• 使用 textContent 替代 innerHTML 设置列表项文字，杜绝 XSS 风险，且更高效；
• 动态创建 并配置其属性；
• 为每个复选框绑定独立的 click 事件监听器，利用 classList.toggle("strikethrough") 切换样式类；
• 将复选框作为子节点插入 li 元素内，确保语义结构正确（即
• 文本
）。

完整可运行代码如下：

⚠️ 注意事项：

• 使用 change 事件而非 click 监听复选框，兼容键盘操作（如空格键切换）；
• 添加 trim() 校验，避免提交空白项；
• prepend() 比 appendChild() 更合理地将复选框置于列表项开头；
• .strikethrough 类建议配合 color 变暗以增强视觉反馈。

该方案具备良好的扩展性：后续如需支持删除、编辑或本地存储，均可基于此结构平滑演进。

本篇关于《按钮点击生成带复选框的有序列表》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！