HTML导航菜单无法动态增删项，因ul/li是静态DOM；动态需JS或框架控制，配合data-*属性解耦数据与结构，避免innerHTML拼接和DOM删除，确保安全、状态保持与可访问性。
HTML 导航布局本身不支持“动态数量”的菜单项——ul 和 li 只是静态容器，真正决定菜单数量的是 JS 渲染逻辑或后端数据注入。硬写死 HTML 结构无法响应权限变更、用户角色切换或运行时配置更新。
为什么直接写- 不能算动态菜单
纯 HTML 的 ul + li 是静态 DOM 节点，浏览器加载后就固定了。哪怕你用 CSS 隐藏部分 li（比如 display: none），它们仍存在于 DOM 中，无法实现：
- 根据用户权限实时增删节点
- 从 API 拉取新菜单后插入到正确层级
- 点击展开二级菜单时才创建对应 ul 子结构
- 多语言切换时批量替换所有 li 文本内容
这些都必须靠 JS 控制 DOM 或框架（Vue/React）的响应式更新来完成。
用 data-* 属性解耦结构与数据
在 HTML 中保留语义化骨架，但把菜单内容交给 JS 驱动：
- 给导航容器加 data-menu-source="api" 或 data-menu-source="json"
- 用 data-menu-id 标记每个 li 对应的权限 key，如 data-menu-id="user:list"
- 二级菜单用 data-submenu-for="system" 关联父项，避免依赖 class 名或 DOM 位置
这样即使后端返回的菜单数组顺序变了、层级深了，JS 也能按属性精准匹配和渲染，而不是靠 querySelector('ul > li:nth-child(2)') 这类脆弱选择器。
避免用 innerHTML 拼接菜单字符串
常见错误是用字符串模板拼 ul：menuEl.innerHTML = `<ul>${items.map(...).join('')}</ul>`。这会带来三个实际问题：
- XSS 风险：若 items[i].title 来自后端未转义，直接插入会执行脚本
- 事件绑定丢失：之前绑在某个 li 上的 click 监听器全被销毁
- 无法复用已有 DOM：比如已展开的子菜单、输入框焦点、滚动位置等状态全部重置
更稳妥的做法是：
- 用 document.createElement('li') + textContent 创建安全节点
- 对已有 li 做 diff 更新（只改文本、增删 class），而非整段替换
- 二级菜单用 template 标签预存结构，content.cloneNode(true) 复用
响应式折叠时别删 DOM，改用 visibility + height
移动端常需将多级菜单收进“☰”按钮。此时不要用 remove() 删除 li，否则下次展开得重新 fetch 数据再渲染。推荐：
- 初始加载时一次性生成全部菜单 DOM
- 折叠状态通过 aria-expanded="false" + hidden 属性控制可访问性
- 用 max-height + overflow: hidden 实现平滑收起动画，比 display: none 更利于性能和状态保持
- 真正需要释放内存的场景（比如超长菜单页），再用 IntersectionObserver 懒加载可见区域内的子项
真正难的不是“怎么让菜单变多”，而是“怎么让变多的过程不破坏已有交互状态、不引入安全漏洞、不拖慢首屏”。这些细节往往在第一次上线后才暴露出来。
