如何在HTML中插入JavaScript变量以实现动态内容展示

你想要实现的将JS变量实时渲染到HTML元素的需求，有两种常用实现方式：

方案1：直接操作DOM（简单场景推荐，你现有写法可直接复用） #

这是最轻量的实现方式，无需引入额外框架，适合少量动态内容更新的场景：

基础代码示例 #

HTML部分：

<span class="scoreboard"></span>

JS部分：

let score = 0;
// 先拿到对应DOM元素的引用
const scoreboard = document.querySelector('.scoreboard');

// 分数更新时调用该方法即可同步更新页面展示
function refreshScore() {
  // 仅展示纯文本优先用textContent，安全性更高，避免XSS注入风险
  scoreboard.textContent = `Your score is ${score}`;
  // 如果需要插入HTML标签，再使用innerHTML
  // scoreboard.innerHTML = `Your score is <span class="highlight">${score}</span>`;
}

// 测试用例：修改分数后调用刷新方法即可
score = 15;
refreshScore(); // 页面将展示：Your score is 15

现有代码适配说明 #

你当前写的game.scoreboard.innerHTML = Score: ${player.collected}``写法本身是有效的，只要保证game.scoreboard是提前获取到的DOM元素引用，每次分数变化时调用draw()方法即可完成更新。

方案2：数据响应式（复杂动态内容场景使用） #

如果你有大量变量需要同步更新到页面，可以手动实现简单的数据劫持，不用手动调用刷新方法：

const gameData = {
  _score: 0,
  get score() {
    return this._score;
  },
  set score(val) {
    this._score = val;
    document.querySelector('.scoreboard').textContent = `Your score is ${val}`;
  }
}

// 直接修改score即可自动更新页面
gameData.score = 20; // 页面自动展示：Your score is 20
gameData.score = 35; // 页面自动更新为：Your score is 35

注意事项 #

• 确保获取DOM元素时，对应元素已经加载完成，可将JS代码放在body尾部，或者监听DOMContentLoaded事件后再执行元素获取逻辑，避免拿到null值
• 若展示内容包含用户输入的内容，禁止使用innerHTML，避免恶意脚本注入风险

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