Fetch HTML修改document.body异常：页面内容显示不符求助

嘿，我懂你现在的烦躁——明明写了fetch加载content.html替换body内容，结果既不是原页面的乱码文本，也不是目标的标题内容，只显示了"PLEAS"。结合你提供的代码和运行环境，咱们一步步排查：

第一步：给代码加日志，搞清楚fetch到底拿到了什么 #

你的代码里没有错误捕获和日志输出，根本不知道请求是成功还是失败，返回的内容是什么。先修改loadContent函数，补上这些关键信息：

function loadContent() {
  fetch("/content.html")
    .then((res) => {
      console.log("请求状态码：", res.status);
      // 先校验请求是否成功
      if (!res.ok) throw new Error(`请求失败！状态码：${res.status}`);
      return res.text();
    })
    .then((text) => {
      console.log("拿到的内容：", text);
      document.body.innerHTML = text;
    })
    .catch((err) => console.error("出错了：", err));
}
loadContent();

打开浏览器开发者工具的Console标签，刷新页面后你就能看到：

• 如果状态码是200，检查拿到的内容是不是<h1>Content page</h1>；
• 如果状态码是404，说明找不到content.html，得检查文件路径和sirv的配置；
• 如果拿到的内容就是"PLEAS"，那说明content.html的内容被意外修改了。

第二步：检查文件结构和sirv运行命令 #

确保你的文件结构是这样的：

你的项目文件夹/
├─ index.html
├─ content.html
└─ package.json

然后查看package.json里的启动命令，必须把当前目录设为静态根目录：

"scripts": {
  "start": "sirv ."
}

如果你的命令是sirv dist或其他子目录，那content.html必须放到对应子目录里，否则会触发404。

第三步：排除缓存和浏览器扩展干扰 #

• 打开开发者工具的Network标签，勾选「Disable cache」（禁用缓存），刷新页面避免旧缓存影响；
• 用浏览器隐身模式打开页面，排除扩展程序修改页面内容的可能。

第四步：确认content.html的实际内容 #

虽然你说content.html里是<h1>Content page</h1>，但还是手动打开文件确认一下——会不会不小心把内容改成了"PLEAS"？或者有没有编码异常的情况？

按上面的步骤排查，应该能很快定位到问题根源，最常见的情况就是content.html路径不对导致404，或者文件内容被意外修改。

内容的提问来源于stack exchange，提问作者dodiameer