如何使用 html 和 javascript 將 a.html 插入同一頁面？

Question

我正在嘗試修復此代碼，以便在按下按鈕后顯示第 1 頁和第 2 頁的內容。 我有這段代碼，希望你能幫助我。 如果可能的話，我試圖將結果顯示到<main> ***HERE*** </main>中：

我嘗試使用之前的代碼但沒有用。

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 => response.text())
    .then(html => {
      mainElement.innerHTML = html;
    });
});

button2.addEventListener('click', () => {
  fetch('./page2.html')
    .then(response => response.text())
    .then(html => {
      mainElement.innerHTML = html;
    });
});

<span>
  <nav>
    <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>
  </nav>
</span>

Answer 1

你錯過了主要元素。 也許您打算在按鈕之后添加它？

<span>
  <nav>
    <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>
  </nav>
</span>
<main></main>