如何用HTML和JavaScript将.html页面内容插入到当前页面？

云上老周

2026-8-6

问题排查与修正方案

1. 修复无效HTML结构

你的HTML中<nav>直接嵌套<li>标签不符合规范，<li>必须被<ul>或<ol>包裹。浏览器会自动修正这类错误DOM，可能导致按钮元素无法被正确获取。

修正后的HTML：

<span>
  <nav>
    <ul>
      <li><button class="route-button" id="button-1">Page 1</button></li>
      <li><button class="route-button" id="button-2">Page 2</button></li>
      <li><button class="route-diver"><a href="./divertidos.html" alt="Scripts divertidos (con los que practico)">Divertidos 😂</a></button></li>
    </ul>
  </nav>
</span>

2. 确保JS在DOM加载完成后执行

如果JS代码放在<head>中，会在DOM元素渲染前执行，导致无法获取按钮和main元素。解决方式二选一：

将JS代码放在<body>标签末尾；
用DOMContentLoaded事件包裹代码（推荐）：

document.addEventListener('DOMContentLoaded', () => {
  const button1 = document.getElementById('button-1');
  const button2 = document.getElementById('button-2');
  const mainElement = document.querySelector('main');

  button1.addEventListener('click', () => {
    fetch('./page1.html')
      .then(response => {
        // 校验请求是否成功
        if (!response.ok) throw new Error(`请求失败：${response.status}`);
        return response.text();
      })
      .then(html => {
        mainElement.innerHTML = html;
      })
      .catch(err => console.error('加载Page1失败：', err));
  });

  button2.addEventListener('click', () => {
    fetch('./page2.html')
      .then(response => {
        if (!response.ok) throw new Error(`请求失败：${response.status}`);
        return response.text();
      })
      .then(html => {
        mainElement.innerHTML = html;
      })
      .catch(err => console.error('加载Page2失败：', err));
  });
});