如何在不使用jQuery时让innerHTML中的JavaScript代码生效？

核心原因很直接：主页面的DOMContentLoaded事件在页面首次加载完成时就已经触发了，之后通过fetch动态插入的HTML里的JS代码，再监听这个事件根本不会有反应——这个事件只会在初始DOM树构建完成时触发一次。

给你几个可行的解决办法：

方法一：直接执行DOM操作代码 #

既然是动态加载HTML后才加载的calendar.js，此时插入的.day元素已经存在于DOM中了，完全没必要把代码包裹在DOMContentLoaded里。直接把逻辑拿出来执行就行：

// calendar.js 修改前
document.addEventListener('DOMContentLoaded', function() {
  // 你的DOM操作逻辑
  const days = document.querySelectorAll('.day');
  console.log('找到的天数：', days.length);
});

// calendar.js 修改后
const days = document.querySelectorAll('.day');
console.log('找到的天数：', days.length);
// 其他后续逻辑直接写...

方法二：封装初始化函数，在HTML加载完成后手动调用 #

把日历的初始化逻辑封装成独立函数，在fetch成功插入HTML后主动调用，比依赖事件靠谱得多：

1. 改造calendar.js，把逻辑包进函数：

// calendar.js
console.log('Test 1');
console.log('Test 2');

// 封装初始化函数
window.initCalendar = function() {
  const days = document.querySelectorAll('.day');
  console.log('初始化日历：', days.length);
  // 原来DOMContentLoaded里的所有逻辑都放这
};

2. 在home.js的fetch回调里调用这个函数：

// home.js
fetch('你的外部HTML文件路径')
  .then(res => res.text())
  .then(html => {
    document.querySelector('.content').innerHTML = html;
    // HTML插入完成后，手动触发日历初始化
    window.initCalendar();
  });

方法三：手动加载script，避免innerHTML的脚本执行坑 #

用innerHTML插入带<script>标签的HTML时，浏览器对外部脚本的执行支持不稳定。建议先插入HTML内容，再手动创建script标签加载calendar.js，并在加载完成后调用初始化函数：

// home.js
fetch('你的外部HTML文件路径')
  .then(res => res.text())
  .then(html => {
    document.querySelector('.content').innerHTML = html;
    // 手动创建script标签加载calendar.js
    const script = document.createElement('script');
    script.src = 'calendar.js';
    // 脚本加载完成后执行初始化
    script.onload = function() {
      window.initCalendar();
    };
    document.body.appendChild(script);
  });

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