jQuery load引入页脚后JS不生效，是否由DOM变化导致？

问题原因 #

• 标签使用不规范：你自定义了非标准的<class>标签作为年份占位符，虽然部分浏览器支持自定义标签的渲染，但标签的解析优先级和标准标签存在差异，可能导致脚本获取节点失败。
• 动态加载的时序问题：jQuery的load()方法加载外部HTML片段时，片段内部的脚本执行时机可能早于新DOM节点完全挂载到父页面DOM树的时机，此时全局调用document.getElementById("getyear")无法匹配到刚插入的节点，赋值逻辑就会失效。你把占位标签直接放到page.html中可以正常执行，恰好印证了这个问题：静态存在的节点在页面初始化时就已挂载到DOM树，不会被时序问题影响。

解决方法 #

方案一（最稳妥，推荐） #

1. 先修正footer.html中的占位标签，替换为标准行内标签：

<!-- 把原来的<class id="getyear"></class>替换为 -->
<span id="getyear"></span>

2. 将年份赋值逻辑放到load()方法的回调函数中，保证DOM插入完成后再执行，同时删除footer.html中原来的赋值脚本：
   修改page.html中的加载逻辑：

<script type="text/javascript">
$(function(){
  $("#footer").load("./Components/footer.html", function() {
    // 回调函数会在footer内容完全插入到当前页面DOM后执行
    document.getElementById("getyear").innerHTML = new Date().getFullYear();
  });
});
</script>

方案二（最小改动，不需要修改page.html代码） #

只修改footer.html即可：

1. 把<class id="getyear"></class>替换为<span id="getyear"></span>
2. 把原有脚本包裹在异步逻辑中，等节点可访问后再执行：

<script>
// 循环检测节点是否存在，最多检测10次，每次间隔50ms
let checkExist = setInterval(function() {
  let yearNode = document.getElementById("getyear");
  if (yearNode) {
    yearNode.innerHTML = new Date().getFullYear();
    clearInterval(checkExist);
  }
}, 50);
</script>

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