时间戳

首页 > 解决方案 > 获取 HTML 并更改文档正文

javascript - 获取 HTML 并更改文档正文

问题描述

请不要将此标记为重复。我尽我所能，这不起作用。我有 Javascript 方面的经验。这不是我第一次使用它

索引.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JUST_LOAD_ALREADY</title>
    <!-- <script defer src="/index.js"></script> -->
  </head>
  <body>
    PLEASSDETY FGUIRWFVUI
    <script>
      function loadContent() {
        fetch("/content.html")
          .then((res) => res.text())
          .then((text) => (document.body.innerHTML = text));
      }
      loadContent()
    </script>
  </body>
</html>

内容.html：

<h1>Content page</h1>

加载完所有内容后正文中的预期页面内容： <h1>Content</h1>

正文中的实际页面内容： PLEAS

它既不是我沮丧的文字，也不是我content.html的内容。这正在杀死我，请帮助告诉我为什么会这样。这是我仅有的两个文件 + 一个用于运行 sirv 的 package.json

标签： javascripthtml

解决方案

添加一个带有 id 的 div 并更改它innerHTML似乎可以工作，由于像@MarkusZeller 所说的那样，脚本在体内有可能是“自杀”。下面的代码有效：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JUST_LOAD</title>
    <!-- <script defer src="/index.js"></script> -->
  </head>
  <body>
    PLEASSDETY FGUIRWFVUI
    <main id="content"></main>
    <script>
      function loadContent() {
        fetch("/content.html")
          .then((res) => res.text())
          .then((text) => (document.getElementById("content").innerHTML = text));
      }
      loadContent();
    </script>
  </body>
</html>

推荐阅读