动态HTML页面本质是JS实时修改DOM树而非替换文件；应避免document.write和未转义innerHTML，优先用createElement+appendChild或DocumentFragment；状态驱动渲染优于手动if判断；fetch需显式调用response.json()；事件绑定统一用addEventListener并注意委托与清理。
动态 HTML 页面本质是 JS 控制 DOM
动态 HTML 页面不是靠“换一个文件”实现的，而是用 JavaScript 实时修改 document 中的元素、属性或样式。浏览器加载完初始 HTML 后，所有后续内容增删改都发生在内存里的 DOM 树上，不触发页面刷新。
常见错误现象：document.write() 在页面加载完成后调用直接清空整个页面；用字符串拼接 HTML 再 innerHTML = ... 但没做转义，导致 XSS 或标签解析错乱。
- 优先用
createElement()+appendChild()做结构插入，安全且语义清晰 - 需要批量更新时，用
DocumentFragment减少重排（reflow）次数 -
innerHTML只在内容完全可信、且结构简单时用，避免嵌套深层或用户输入直插
数据驱动渲染：别手写一堆 if 判断显隐
当页面要根据状态切换内容（比如登录/未登录、加载中/已加载），硬写 if (status === 'loading') { el.innerHTML = '...' } 很快会失控。真正可维护的方式是把状态和模板绑定起来。
使用场景：表单反馈、列表过滤、主题切换、权限控制下的菜单项显示。
立即学习“前端免费学习笔记（深入）”；
- 最简方案：用
dataset存状态，CSS 用属性选择器（如[data-status="loading"] .content { display: none; }）控制显隐 - 稍复杂点：用
template标签存 HTML 片段，配合content.cloneNode(true)复用结构 - 避免反复查询
document.getElementById()，把常用节点缓存为变量（如const $list = document.querySelector('#item-list');）
fetch 返回的数据怎么安全塞进页面
fetch 默认返回 Promise，但拿到的 response 不是 JSON，必须显式调用 response.json() 才能解析。漏掉这步或没处理 reject，页面就卡住或报 TypeError: response.json is not a function。
性能影响：直接把大段 HTML 字符串塞进 innerHTML 会触发完整 HTML 解析，比用 DOM API 慢且消耗内存更多。
- 始终用
.then(res => res.json())或await response.json()解析响应体 - 网络失败、404、500 都会进
catch，不要只捕获network error忽略 HTTP 状态码 - 后端返回 HTML 片段（非 JSON）时，用
response.text()，再用DOMParser解析，避免innerHTML执行脚本
事件绑定别写死在 HTML 里
onclick="handleClick()" 看似方便，但破坏了行为与结构分离，无法动态控制、难以测试，还容易因作用域问题报 handleClick is not defined。
兼容性影响：旧版 IE 对 addEventListener 支持弱，但现代项目基本不用考虑；真正要注意的是事件委托失效——比如给未来才插入的按钮绑事件，得监听父容器并判断 event.target。
- 统一用
element.addEventListener('click', handler)，避免内联事件属性 - 动态生成的元素，绑定事件到稳定父级（如
#list），再用event.target.matches('.btn-delete')过滤 - 记得在不需要时调用
removeEventListener，尤其涉及定时器或重复初始化的模块
动态的本质不在“看起来动”，而在“状态变 → 视图自动同步”。很多坑都来自手动操作 DOM 时没理清数据流向，或者把临时逻辑写死了。留心那些每次加新功能都要改三处的地方，大概率就是该抽离状态或引入更小粒度更新机制的时候了。
