首个JS脚本正常运行，第二个脚本无法读取文件的技术问题

问题描述 #

尝试在页面中引入多个JS文件，但第二个脚本（test.js）始终无法正常工作，调整<script>标签位置或修改ID都无法解决。

相关代码 #

HTML代码

<div id="buttoncontainer" class="buttoncontainer">

<script src="js/menu.js"></script>
<script src="js/test.js"></script>

<div class="rightmenu">
        <div id="test" style="height:400px;width:100px;outline:solid red 1px;">
    </div>
</div>

menu.js代码

let headerContent = `
  <a href="index.html">
    <img src="images/buttons/homebutton.gif" class="button"></a>

  <a href="blog/blogmain.html">
    <img src="images/buttons/blogbutton.gif" class="button"></a>

  <a href="art/artmain.html">
    <img src="images/buttons/artbutton.gif" class="button"></a>

<div class="dropmenu1">
  <a href="art/fanartmain.html">
    <img src="images/buttons/fanartbutton.gif" class="button"></a>

    <div class="dropmenu1-content">
    <a href="links/links.html">
    <img src="images/buttons/linksbutton.gif" class="button dropbutton"></a>
    </div>
    </div>

<div class="dropmenu2">
  <a href="art/donate.html">
    <img src="images/buttons/donatebutton.gif" class="button"></a>

    <div class="dropmenu2-content">
    <a href="comissions/comissions.html">
    <img src="images/buttons/comissionsbutton.gif" class="button dropbutton"></a>
    </div>
    </div>

  <a href="guestbook/guestbook.html">
    <img src="images/buttons/guestbookbutton.gif" class="button"></a>

<div class="dropmenu3">
  <a href="art/about.html">
    <img src="images/buttons/aboutbutton.gif" class="button"></a>
    
    <div class="dropmenu3-content">
    <a href="https://junessai.github.io/Old-JuneSSai.net-Archive/" target="_blank">
    <img src="images/buttons/oldsitebutton.gif" class="button dropbutton"></a>

    <a href="changelog/changelog.html">
    <img src="images/buttons/changelogbutton.gif" class="button dropbutton"></a>
    </div>
    </div>
`;
document.querySelector('#buttoncontainer').insertAdjacentHTML('beforeend', headerContent);

test.js代码

let headerContent = `
 <img src="images/test.png">
`;
document.querySelector('#test').insertAdjacentHTML('beforeend', headerContent);

问题根源 #

浏览器同步解析执行脚本：当解析到<script>标签时，会立即下载并执行对应的JS代码，此时<div id="test">元素还未被浏览器解析生成，document.querySelector('#test')返回null，调用insertAdjacentHTML会直接报错，导致脚本失效。

解决方案 #

方案1：将脚本标签移至目标元素之后 #

把<script>标签放到#test元素的后面，确保执行脚本时目标元素已存在：

<div id="buttoncontainer" class="buttoncontainer">

<div class="rightmenu">
        <div id="test" style="height:400px;width:100px;outline:solid red 1px;">
    </div>
</div>

<script src="js/menu.js"></script>
<script src="js/test.js"></script>

方案2：监听DOM加载完成事件 #

在JS代码中包裹逻辑，等待整个DOM树构建完成后再执行：
修改test.js为：

document.addEventListener('DOMContentLoaded', function() {
  let headerContent = `
   <img src="images/test.png">
  `;
  document.querySelector('#test').insertAdjacentHTML('beforeend', headerContent);
});

同样也可以给menu.js加上这个监听，确保兼容性。

方案3：给