应使用事件委托，在静态父容器上绑定一次点击事件，通过event.target.matches()或closest()判断触发源，避免为动态元素重复绑定导致失效。
点击按钮后新列表项没出现？检查是否漏了 appendChild
常见现象是按钮点了没反应，或者控制台报 TypeError: Cannot read property 'appendChild' of null。根本原因通常是目标容器（比如 <ul>）没找到，或 JS 执行时 DOM 还没加载完。
- 确保 JS 放在
</body>前，或用DOMContentLoaded包裹 - 用
document.querySelector('ul')而不是getElementById时，确认选择器能匹配到真实存在的元素 - 创建新节点后必须显式调用
appendChild或append，光document.createElement不会自动插入页面
用 innerHTML 拼接字符串 vs createElement：选哪个？
innerHTML += '<li>新项</li>' 看起来简单，但每次执行都会重写整个列表内容，已有 DOM 事件监听器、输入框焦点、滚动位置全丢。而 createElement + appendChild 是增量操作，安全可靠。
- 如果只是纯文本追加，
document.createElement('li')+textContent最稳妥 - 需要插入含 HTML 的内容（如带链接的项），优先用
insertAdjacentHTML('beforeend', htmlString)，它比 innerHTML 更精准且不破坏已有结构 - 避免在循环里反复读写
innerHTML，性能差还容易出错
新增列表项后，怎么让焦点自动落到新项上？
对可访问性（a11y）和用户体验很重要，尤其当列表用于任务管理或表单场景。单纯插入节点不会触发焦点，得手动调用 focus()。
- 给新
<li>加tabindex="-1"，再调用newItem.focus() - 如果新项里有可聚焦子元素（比如删除按钮），直接对那个子元素调用
focus() - 注意：Safari 对动态插入后立即 focus 支持不稳定，可加
setTimeout(() => newItem.focus(), 0)兜底
为什么新增的项点击事件不生效？事件委托是解法
直接给每个新 <li> 绑定 onclick 会导致内存泄漏，而且旧监听器不会自动绑定到后续新增节点。正确做法是把事件监听器挂在父容器上，靠事件冒泡捕获。
立即学习“前端免费学习笔记（深入）”；
- 监听
ul的click，然后用e.target.matches('li')判断是否点中列表项 - 删除按钮这类子元素，用
e.target.closest('button.delete')安全获取目标 - 别在循环里重复调用
addEventListener，否则同一事件会绑多次
动态添加看似简单，真正麻烦的是状态同步、焦点管理、事件绑定和可访问性——这些细节不处理，用户一交互就露馅。
