如何将.js文件中的JavaScript代码以文本形式插入HTML页面？

DevOps 小满

2026-5-19

嘿，欢迎加入Stack Overflow！不用太担心提问方式，大家都是从新手阶段过来的😉

下面给你几种把.js文件里的JavaScript代码以文本形式插入HTML页面的方法，按需选择就行：

方法1：直接嵌入代码（适合少量代码，手动维护）

最直接的方式就是把.js文件里的代码复制出来，用<pre>+<code>标签包裹，这样能完美保留代码的缩进和换行，浏览器还会用等宽字体显示，看起来就是标准的代码样式：

<pre>
  <code>
// 这是从你的.js文件里复制的代码示例
function calculateSum(a, b) {
  return a + b;
}

const result = calculateSum(5, 7);
console.log(`计算结果：${result}`);
  </code>
</pre>

*小提示：如果代码里包含<、>、&这类HTML特殊字符，记得把它们转成对应的HTML实体（比如<→<，>→>，&→&），不然浏览器可能会错误解析这些字符。

方法2：动态加载.js文件内容（适合代码较多，想自动同步的情况）

如果你不想每次修改.js文件后都手动复制代码到HTML里，可以用JavaScript的fetch API来动态读取.js文件的文本内容，然后插入到页面中：

<!-- 先准备一个用来显示代码的容器 -->
<pre id="jsCodeDisplay"></pre>

<script>
// 替换成你的.js文件的实际路径，比如 './app.js'
fetch('./your-script.js')
  .then(response => {
    if (!response.ok) {
      throw new Error(`请求失败：${response.status}`);
    }
    return response.text();
  })
  .then(codeContent => {
    // 把读取到的代码文本插入到容器里
    document.getElementById('jsCodeDisplay').textContent = codeContent;
  })
  .catch(error => {
    // 如果加载失败，显示错误信息
    document.getElementById('jsCodeDisplay').textContent = `加载代码出错啦：${error.message}`;
  });
</script>

*注意：如果是直接用浏览器打开本地HTML文件（file://协议），可能会遇到跨域限制导致加载失败，建议用本地服务器来运行（比如VS Code的Live Server插件，或者用python -m http.server启动简单服务器）。

方法3：用<xmp>标签（简单但不推荐）

还有个旧标签<xmp>，它会直接显示里面的所有文本内容，不需要转义特殊字符，但这个标签已经被HTML标准废弃了，可能在某些现代浏览器里有兼容性问题，所以只适合临时快速测试用：

<xmp>
// 你的JS代码示例
const userName = prompt("请输入你的名字");
alert(`你好，${userName}！`);
</xmp>

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