如何在HTML中通过CDN引入jQuery并关联JS脚本，排查运行效果异常问题

问题诊断 #

你当前的资源引入逻辑本身没有语法错误，出现效果不一致的核心原因是JS执行时机不对：

• 你把old.js放在<head>中直接加载，代码执行时<body>里的DOM元素还未渲染完成，JS中操作DOM的逻辑找不到目标元素，自然无法实现预期效果。
• JSFiddle平台默认会将用户提交的JS代码包裹在DOM加载完成的回调中，等页面所有DOM元素渲染完毕后再执行，所以在JSFiddle中运行正常，本地直接引入就会出问题。

修复方案 #

二选一即可：

1. 调整JS文件的引入位置，将old.js的引入代码移到</body>闭合标签之前，修改后的HTML结构如下：

<html>
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="images/icon.webp">
    <link rel="stylesheet" href="./new.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  </head>
  <body>
  <!-- Html body 内容 -->
  <script type="text/javascript" src="./old.js"></script>
  </body>
</html>

2. 不改动引入位置，给old.js的所有代码外层包裹jQuery的DOM加载完成回调：

// old.js 整体结构
$(function() {
  // 原有old.js的全部代码放在此处
});

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