ol元素不支持innerHTML批量追加li，因会重置序号；应使用appendChild或insertBefore操作DOM节点；推荐用template避免XSS并集中管理结构；CSS计数器需注意重绘触发。
ol 元素本身不支持直接用 innerHTML 批量追加 li
很多人试过 document.getElementById('myList').innerHTML += '<li>new item</li>'，发现旧内容被清空或序号错乱——因为 ol 是有序列表，浏览器会重算 start 和实际序号，而 innerHTML 赋值会完全重建子节点，破坏原有计数上下文。
正确做法是操作 DOM 节点本身。最稳妥的是用 appendChild() 或 insertBefore()：
const ol = document.getElementById('myList');
const li = document.createElement('li');
li.textContent = '动态添加的第 ' + (ol.children.length + 1) + ' 项';
ol.appendChild(li);需要插入到指定位置时，必须用 insertBefore
appendChild 只能加在末尾；如果要在第 2 个 li 前插入，就得靠 insertBefore，它要两个参数：新节点、参考节点（即插在哪之前）。
常见错误是传错参考节点，比如误用 ol.children[2] 当作插入位置，结果插到了第 3 项前（索引从 0 开始）。
立即学习“Java免费学习笔记（深入）”；
- 想插到第
n个位置（从 1 数），参考节点应为ol.children[n - 1] - 如果
n超出当前长度（比如插到末尾），insertBefore会自动退化为appendChild，但更推荐显式判断后分支处理 - 注意：参考节点必须是
ol的直系子元素，不能是文本节点或注释节点（ol.childNodes包含这些，ol.children更安全）
用 template 标签避免字符串拼接 HTML
直接拼 '<li class="item">' + text + '</li>' 容易 XSS，也难维护。用 <template> 预定义结构，再克隆使用，更干净：
<template id="liTemplate"> <li class="dynamic-item"></li> </template>
JS 中复用：
const tmpl = document.getElementById('liTemplate');
const li = tmpl.content.cloneNode(true).firstElementChild;
li.textContent = userInput;
ol.appendChild(li);这样既避免了内联 HTML 注入风险，又让样式类名和结构集中管理。
动态添加后，CSS counter-reset 不会自动更新
如果你用 CSS 的 counter-reset: item + counter-increment: item 自定义序号（比如罗马数字、带前缀的编号），单纯加 li 节点不会触发重计数——因为 CSS 计数器依赖渲染树，而新增节点插入后虽会重排，但某些老浏览器或复杂嵌套下可能延迟生效。
保险做法是强制重绘一次，例如：
ol.appendChild(li); ol.offsetHeight; // 触发 reflow，确保计数器刷新
或者更轻量地改一个无关样式：ol.style.cssText += ';'。不过多数现代浏览器中，只要节点插入完成，计数器都会正常工作；真正容易出问题的是用 JS 修改了 li 的 value 属性（如 <li value="5">），这会干扰默认序号逻辑，尽量别碰。
序号逻辑本身很脆弱，尤其是混合手动 value 和自动计数时，一不小心就跳号或重复。真要精细控制，不如放弃 ol 默认行为，用 CSS counter 或纯 JS 渲染序号文本。
