如何在HTML文档中导入JavaScript文件并调用其中变量？

架构老林

2026-8-13

问题原因及修复方案

核心问题

你的代码有三个关键问题导致内容无法正常显示：

DOM加载顺序错误：你把<script>放在<body>最顶部，JS执行时，下面的<div id="title">和可能存在的#productTitle元素还没被浏览器渲染出来，所以JS找不到这些元素，赋值操作直接失效。
HTML标签未闭合：<div id="title">没有写闭合标签</div>，这会导致DOM结构混乱，浏览器无法正确识别这个元素。
缺少jQuery依赖：server.js里用了$（jQuery语法），但你的HTML里没引入jQuery库，这会直接导致$("#productTitle")报错，title变量根本拿不到值。

修复后的代码

1. 修正HTML文件

把script标签移到<body>末尾，先引入本地的jQuery库（需提前下载到项目目录），同时闭合div标签：

<body>
  <table>
    <tr>
      <th>header</th>
    </tr>
    <tr>
      <td><div id="title"></div></td>
    </tr>
  </table>

  <!-- 先引入本地的jQuery库文件 -->
  <script src="jquery.min.js"></script>
  <!-- 再引入你的server.js -->
  <script src="server.js"></script>
</body>

2. 修正server.js文件

用jQuery的ready方法确保DOM完全加载后再执行代码，避免找不到元素的问题：

$(document).ready(function() {
  // 获取productTitle的文本并去除多余空格
  let title = $("#productTitle").text().replace(/\s\s+/g, "");
  // 把内容赋值给title元素
  document.getElementById("title").innerHTML = title;
});

如果不想用jQuery，也可以用原生JS的方式：

// 监听DOM加载完成事件
document.addEventListener('DOMContentLoaded', function() {
  let productTitleEle = document.getElementById('productTitle');
  if (productTitleEle) {
    let title = productTitleEle.textContent.replace(/\s\s+/g, "");
    document.getElementById("title").innerHTML = title;
  }
});