使用 javascript 更改 HTML 文件中的加载内容

Question

一些内容，在本例中是导航栏 (navbar.php)，由 Javascript 加载到 index.html。现在我想使用 Javascript 将导航栏列表项从“Home”更改为“Something else”。但是脚本好像看不到加载的内容。控制台给出“document.getElementById(...) is null”错误。以下代码：

index.html

<!DOCTYPE html>
<html lang="de">
  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      $(function() {
        $("#navbar").load("navbar.php");
        return false;
      });
    </script>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <header>
          <div id="navbar">

          </div>                        
        </header>
        <main>
        
        </main>
        <footer>
        
        </footer>
        <script>
          let myChange = document.getElementById("change").innerHTML;                   
          myChange = "<a href='somethingelse.html'>Something else</a>";
        </script>
      </body>
    </div>
  </div>
</html>

navbar.php

<div>
  <ul>
    <li id="change"><a href="index.html">Home</a></li>
    <li ><a href="logout.php">Logout</a></li>
  </ul>
</div>

知道代码中有什么问题吗？提前致谢。

Answer 1

您需要使用 load's callback function 加载才能知道内容何时添加到文档中。

$("#navbar").load("navbar.php", function() {
  const myChange = document.getElementById("change");
  myChange.innerHTML = "<a href='somethingelse.html'>Something else</a>";
});

使用 javascript 更改 HTML 文件中的加载内容

Change loaded content in an HTML file with javascript

html

javascript