JavaScript动态添加列表项应使用createElement+appendChild而非innerHTML，以避免清空事件监听和XSS风险；需确保DOM加载完成、ID正确，并通过事件委托实现安全删除功能。
点击按钮后用 JavaScript 操作 DOM 添加列表项
直接改 innerHTML 最快，但容易清空已有事件监听或表单输入；更稳妥的做法是用 document.createElement + appendChild。前提是你的列表容器有明确的 ID，比如 <ul id="item-list"></ul>。
常见错误：按钮没绑定事件、ID 写错、JS 在 HTML 加载前执行（导致找不到元素）。确保 <script> 放在 </body> 前，或用 DOMContentLoaded 包裹逻辑。
- 给按钮加
id="add-btn"或直接用querySelector找到它 - 每次新增前检查目标
<ul>是否存在，避免Cannot read property 'appendChild' of null - 新
<li>的内容建议用textContent而非innerHTML，防 XSS（除非你明确需要渲染 HTML）
如何让新增项带删除功能？
不能只在循环里绑 onclick，否则闭包问题会导致所有删除按钮删最后一个。正确做法是事件委托——监听父容器，判断点击目标是否为删除按钮。
示例结构：<li>苹果 <button class="del-btn">×</button></li>。父容器（如 #item-list）监听 click，再用 event.target.classList.contains('del-btn') 判断。
立即学习“前端免费学习笔记（深入）”；
- 删除时用
event.target.closest('li')定位要删的整个<li>，兼容嵌套结构 - 别用
removeChild手动找父节点，element.remove()更简洁 - 如果列表项含输入框，删除前不用特殊处理——DOM 移除后其事件和数据自动释放
用数组管理数据再渲染，还是直接操作 DOM？
纯静态展示、项数少（
典型坑：用户点了 5 次按钮，你往 DOM 加了 5 个 <li>，但 JS 里没存任何引用——后续想“清空列表并重置计数器”就只能查 DOM 长度，不可靠。
- 定义一个
let items = []，每次新增先push数据，再调用渲染函数 - 渲染函数里清空容器（
innerHTML = ''或遍历移除），再遍历items创建新节点 - 这样未来加“按字母排序”只要
items.sort()再重渲染，不碰 DOM 细节
为什么新增后焦点没落到新项上？
浏览器不会自动聚焦动态插入的元素，尤其 <li> 默认不可聚焦。若需键盘导航或屏幕阅读器支持，得手动设 tabindex 并调用 focus()。
比如新增后：
newLi.tabIndex = 0; newLi.focus();。注意
tabIndex="0" 让元素进入顺序焦点流，而 -1 只允许脚本聚焦、不参与 Tab 键切换。
- 如果新项含可交互子元素（如按钮、输入框），优先聚焦那个子元素，而非
<li>本身 - 用
setTimeout(() => newLi.focus(), 0)避免因渲染未完成导致聚焦失败 - 移动端 Safari 对动态聚焦限制较严，部分场景需用户真实点击触发后才允许脚本聚焦
