JS动态加载内容后getElementById返回null问题排查

你的代码存在3处问题，直接导致了报错和功能失效：

• 异步加载时序错误：jQuery的load()是异步AJAX请求，页面底部脚本执行时，navbar.php的内容还未加载完成并插入DOM，id为change的列表项此时还不存在，document.getElementById("change")自然返回null，触发报错。
• DOM修改逻辑错误：你先将#change的innerHTML值存入变量myChange，之后直接给myChange赋值新字符串，这个操作仅修改变量本身，不会同步更新DOM——变量存储的是字符串值的副本，不是DOM节点的引用，赋值操作和原节点没有任何关联。
• HTML结构错误：代码末尾的div闭合标签顺序错乱、存在多余闭合标签，会导致浏览器解析DOM结构异常，可能干扰元素正常查找。

将修改导航栏的逻辑放到load()的加载完成回调中，等动态内容完全插入DOM后再执行修改，同时修正DOM操作写法和HTML结构错误。
修正后的index.html代码：

<!DOCTYPE html>
<html lang="de">
  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      $(function() {
        // load的第二个参数为加载完成回调，仅在内容插入DOM后执行
        $("#navbar").load("navbar.php", function() {
          // 直接修改目标节点的innerHTML
          document.getElementById("change").innerHTML = "<a href='somethingelse.html'>Something else</a>";
        });
      });
    </script>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <header>
          <div id="navbar"></div>                        
        </header>
        <main></main>
        <footer></footer>
      </div>
    </div>
  </body>
</html>

navbar.php无需修改，调整后刷新页面即可看到导航栏的Home项被正常替换为目标内容。

内容的提问来源于stack exchange，提问作者Mochuleo