Change loaded content in an HTML file with javascript

June 3, 2022

Some content, in this case a navbar (navbar.php), is loaded into the index.html by Javascript. Now I want to change a navbar list item from "Home" to "Something else" using Javascript. But it seems that the script can not see the loaded content. The console gives an „document.getElementById(…) is null“ error. Following the code:

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>

Any idea what is wrong in the code?
Thanks a lot in advance.

>Solution :

You would need to use the load’s callback function for load to know when the content has been added to the document.

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