fetch() + innerHTML 是最轻量可控的局部刷新方案；需防表单提交中断请求、确保 DOM 就绪、用 replaceChildren() 替代 innerHTML +=、采用事件委托避免监听器丢失、优先返回 JSON 防 XSS、校验响应状态并控制加载态。
用 HTML 按钮实现页面局部刷新，fetch() + innerHTML 是最轻量、最可控的方案，不需要框架、不引入额外依赖，现代浏览器全支持。
按钮点击后没反应？先检查默认行为和 DOM 就绪时机
最常见的“点了没反应”，根本不是 fetch 写错了，而是按钮触发了表单提交或页面跳转，把请求中断了。
- 确保按钮是
<button type="button">，不是type="submit"（除非你手动调用了e.preventDefault()） - 事件监听器必须在目标容器和按钮都已渲染后才绑定——把 JS 放在
</body>前，或包在document.addEventListener('DOMContentLoaded', ...)里 - 加一行
console.log("clicked")在事件回调开头，确认 JS 是否执行；再查 Network 面板看请求是否发出 - 错误示例：
Uncaught TypeError: Cannot set property 'innerHTML' of null，说明document.getElementById('result-box')返回了null，ID 拼错或脚本执行太早
fetch 后怎么安全地塞进页面？别直接 innerHTML +=
很多人一上来就写 el.innerHTML += responseText，结果点一次追加一次，内容越堆越多。这不是 bug，是你没明确“替换”意图。
- 想完全替换旧内容：用
el.innerHTML = htmlString或更推荐的el.replaceChildren(...) -
replaceChildren()不解析 HTML 字符串，不执行内联<script>，防 XSS，还能保留父容器上已绑定的事件监听器（比如分页按钮的 click） - 如果后端返回的是 JSON，别拼 HTML 字符串，改用
document.createElement()构建节点再replaceChildren()插入 - 字段必须判空：
data?.title || '加载中'，否则undefined会变成文字显示出来
插入新内容后，按钮没响应？事件监听器丢了
innerHTML = 会销毁整个子树，原来绑在子元素上的事件监听器全部失效。新插入的按钮点不了，不是 JS 没生效，是没人监听它。
立即学习“前端免费学习笔记（深入）”；
- 不要在新 HTML 片段里写
onclick="doSomething()"—— 这种内联 handler 在 innerHTML 赋值后不会自动重绑 - 改用事件委托：
document.addEventListener('click', e => { if (e.target.matches('[data-action="refresh"]')) { /* 处理 */ } }) - 如果必须为每个新按钮单独绑定，要在插入后显式调用初始化函数，例如
initNewButtons(el) - 注意：动态插入的
<script>标签不会自动执行，需要手动提取、创建 script 元素并 append，但极易出错，应尽量避免
后端返回 HTML 还是 JSON？选错会影响安全和维护性
这个选择不是“哪个更快”，而是“谁负责结构控制、谁承担 XSS 风险”。
- 返回纯 HTML 片段（如
<div class="item">...</div>）：前端省事，但后端必须严格过滤用户输入，否则innerHTML =直接执行恶意脚本 - 返回 JSON（如
{"title": "订单完成", "count": 3}）：前端用模板字面量拼 DOM，或用replaceChildren()插入真实节点，XSS 风险可控，字段名写错会报错而非静默失败 - 路径和状态码必须校验：
response.ok为 false 时（404/500），别直接.text()，否则解析失败会抛异常；建议统一用response.json().catch(() => ({ error: true }))
真正容易被忽略的，是加载态控制和重复提交——按钮点下去没视觉反馈，用户手快连点两次，后端可能收到两份相同请求。禁用按钮、加 loading 类、用 AbortController 主动取消前序请求，这些不是锦上添花，是上线前必须补上的细节。
