本文详解如何通过 JavaScript 正确修改 <script> 标签中声明的全局变量（如 data），而非仅替换其 HTML 内容；重点指出直接修改 innerHTML 不会重新执行脚本，因此变量值不会更新，必须直接操作变量本身。
本文详解如何通过 javascript 正确修改 `<script>` 标签中声明的全局变量（如 `data`），而非仅替换其 html 内容；重点指出直接修改 `innerhtml` 不会重新执行脚本，因此变量值不会更新，必须直接操作变量本身。</script>
在前端开发中，常有人误以为修改 <script id="datas"> 的 innerHTML 就能“重载”其中定义的变量——但这是对浏览器脚本执行机制的常见误解。HTML 中的 <script> 标签内容仅在页面解析或显式执行时被求值；单纯设置 element.innerHTML 不会触发 JavaScript 重新解析与执行，因此 data.key 仍保持初始值，点击“Check”按钮自然弹出 "ABCDEFG"。
✅ 正确做法：将 data 视为一个已声明的全局对象，直接修改其属性：
<script id="datas">
// 此处定义全局变量 data（挂载在 window 上）
var data = {
key: "ABCDEFG",
balance: "100"
};
</script>
<script>
document.getElementById("loadData").addEventListener("click", function () {
alert(data.key); // → "ABCDEFG"（初始值）
});
document.getElementById("change").addEventListener("click", function () {
// ✅ 直接修改全局对象属性（推荐、安全、高效）
data.key = "BCSD123";
data.balance = "200";
alert(data.key); // → "BCSD123"
});
</script>⚠️ 注意事项：
- 不要用 innerHTML 替换脚本内容：document.getElementById("datas").innerHTML = "..." 仅改变 DOM 文本，不执行代码，也不会覆盖 data。
- 确保变量作用域正确：示例中 var data = {...} 在全局作用域声明，等价于 window.data，可被后续脚本直接访问。若使用 let 或 const 声明，则受限于块作用域，无法跨脚本访问。
- 避免 eval() 等危险方案：虽可通过 eval(scriptElement.textContent) 强制执行新脚本，但存在严重 XSS 风险与性能问题，绝对不推荐。
- 更优实践建议：对于需频繁更新的数据，推荐封装为模块化对象或使用 localStorage + 数据监听，而非依赖内联脚本硬编码。
总结：修改脚本标签内的数据，本质是修改运行时变量状态，而非文本内容。牢记“DOM 操作 ≠ JS 执行”，始终优先采用直接属性赋值方式更新已有对象——简洁、可靠、符合 Web 标准。
