如何在HTML中显示JavaScript变量并实现动态更新？

下面是几种原生JS实现的简单方案，以分数score为例，实现初始显示和累加更新：

方法1：用普通DOM元素（span/div）展示 #

这种方式适合纯文本展示，安全且常用。

HTML结构 #

<p>当前分数：<span id="score-display"></span></p>
<button onclick="increaseScore()">点击加分</button>

JavaScript代码 #

// 初始化分数变量
let score = 1;
// 获取用于显示的DOM元素
const scoreDisplay = document.getElementById('score-display');

// 页面加载时先渲染初始值
scoreDisplay.textContent = score;

// 加分函数
function increaseScore() {
  // 累加分数
  score++;
  // 更新页面显示
  scoreDisplay.textContent = score;
}

方法2：用input元素展示 #

适合需要表单交互或者希望展示为输入框样式的场景，这里设置为只读避免用户手动修改。

HTML结构 #

<p>当前分数：<input type="text" id="score-input" readonly></p>
<button onclick="addScore()">加1分</button>

JavaScript代码 #

let score = 1;
const scoreInput = document.getElementById('score-input');

// 初始化显示
scoreInput.value = score;

function addScore() {
  score += 1;
  // 更新输入框的值
  scoreInput.value = score;
}

注意事项 #

• 优先使用textContent而非innerHTML：textContent只会处理纯文本，不会解析HTML标签，能避免XSS安全风险；如果确实需要插入HTML内容，再考虑innerHTML。
• 如果需要更复杂的状态管理，可以考虑使用前端框架（如Vue、React），但原生JS的上述方案足以应对简单场景。

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