最稳妥的动态添加列表项方式是操作 dom 节点而非 innerhtml；需正确闭合标签、慎用 reversed、优先事件委托，并用 value 属性控制编号，避免结构错误。
直接在内部末尾插入新的- 元素
往已有
- 里追加新项，最稳妥的方式是操作 DOM 节点，而不是拼接字符串再赋值给
innerHTML。后者会强制重渲染整个列表，导致焦点丢失、滚动位置跳变、已绑定事件失效。
- 用
document.createElement('li')创建新项，设置文本或 HTML 内容后，调用olElement.appendChild(newLi) - 更简洁的替代：用
olElement.insertAdjacentHTML('beforeend', '<li>新内容</li>')—— 不触发重排，保留原有节点事件（前提是新 HTML 不含内联onclick等） - 如果新项需绑定点击逻辑，优先用事件委托：给
<ol></ol>容器加监听，通过event.target.matches('.action-btn')判断是否命中目标元素
里用value属性控制单个- 的编号值
默认情况下，
- 中每个
<li> 按顺序自动编号。但若需跳号、插序或覆盖默认值（比如“第5步”后面突然来个“第12步”），不能靠 start 属性——它只影响整个列表起始值。
- 给特定
<li value="12">加value属性，浏览器会以该数字作为该项编号，后续项继续递增（如 12, 13, 14） -
value只接受整数，不支持字母或罗马数字；想实现 A/B/C 编号请用 CSS 的list-style-type: upper-alpha - 注意：
value是 HTML 属性，不是 CSS，写在标签里，别试图用 JS 设置li.style.value（无效）
动态添加时避免闭合遗漏和嵌套错误
常见错误不是 JS 写错，而是生成的 HTML 字符串本身结构非法。比如拼出 <ol>
<li>A</li>
<li>B</li>
</ol> —— 第二个 <li> 缺少闭合，浏览器容错解析后可能把 B 当作文本节点而非列表项，导致 querySelectorAll('li') 只拿到 1 个结果。
- 确保每次插入的 HTML 字符串中，每个
<li>都显式闭合：<li>内容</li>，哪怕内容为空 - 禁止把块级元素（如
<div>、<code><p></p>）直接塞进<ol></ol>和<li>之间；合法结构只能是<ol><li>...</li></ol>
- 用
DOMParser 预校验字符串： <code>new DOMParser().parseFromString(htmlStr, 'text/html').body.querySelector('li')能提前暴露语法问题 - 如果你依赖编号语义（比如“倒计时步骤”），新增项前先读取当前
ol.children.length，手动设value更可靠 -
reversed是布尔属性，仅控制方向，不改变start或value的作用逻辑 - 现代项目慎用
reversed：部分旧 Android WebView 渲染异常，且无障碍工具支持不一致
reversed 属性对新增项的影响
带 reversed 的
- 默认从最大数往下减（如 5, 4, 3…）。此时新增
<li> 的编号行为容易误判：它不会自动取「当前最小值 − 1」，而是基于已有项数量计算——新增第 6 项，编号就是 0（5→4→3→2→1→0）。
ol 的 children 列表里，而不是挂在父级 textContent 中。
