直接往<li>标签加data-*属性最干净，不渲染、不影响CSS和有序列表计数；禁用hidden input因其属表单控件、易被误判且引发name冲突；dataset读取需注意驼峰转换、值恒为字符串、空值匹配规则；备注建议JSON编码但不可信，敏感信息须服务端校验。
有序列表项里怎么塞备注而不破坏结构
直接往<li>标签上加data-属性是最干净的做法。浏览器不渲染它，CSS 不会受影响，JS 也能立刻读取。比如<li data-item-id="789" data-source="admin">编辑用户</li>，既没新增 DOM 节点，也不干扰 <ol> 的计数逻辑。
为什么别用<input type="hidden">塞进<li>
这种写法看似直观，但多数时候是错的：
-
<input type="hidden">是表单控件，只在父级<form>提交时才生效；如果这个<ol>纯属展示用途，它就是个无意义的 DOM 节点 - 某些前端表格/列表库（如 DataTables、AG Grid 的轻量替代）会扫描
<li>内所有input，误判为可编辑字段 - 若同一
<li>需存多个字段，写多个hiddeninput 容易让后端收到 name 冲突或数组化值（如row_meta[]），难以对齐业务语义
dataset API 读取 data- 属性的坑
JS 里用 el.dataset 读取很方便，但要注意三处细节：
- 命名自动转驼峰：比如
data-item-id="123"→el.dataset.itemId，不是el.dataset.item-id或el.dataset["item-id"] - 值永远是字符串：
data-active="false"读出来是"false"，需显式转换：JSON.parse(el.dataset.active)或el.dataset.active === "true" - 空值判断要小心：
querySelectorAll("li[data-item-id]")能匹配所有带该属性的项；但写成li[data-item-id=""]就只能匹配值为空字符串的，漏掉大多数情况
备注信息要不要 JSON 编码或加密
值建议用 JSON 字符串编码，比如 data-meta='{"role":"editor","ts":1726933740}'。这样能安全存多个字段，避免引号、换行导致 HTML 解析失败。但别幻想加密或哈希——所有客户端侧备注都等同于明文。用户打开 DevTools 一眼就能看到、改掉。真正敏感的字段（如权限标识、操作类型白名单）必须由服务端生成签名，并在接收请求时严格校验。
立即学习“前端免费学习笔记（深入）”；
