如何通过JavaScript修改script标签数据并使其生效？

你遇到的核心问题是：修改id="datas"的script标签innerHTML后，浏览器不会自动重新执行这段脚本，内存中的data对象还是最初定义的版本，所以点击Check按钮依然弹出旧值。

原因解释 #

页面加载时，浏览器会执行一次script标签内的代码，把data对象挂载到全局作用域。之后你修改了标签的文本内容，但这个操作仅改变了DOM节点的文本，并不会触发脚本重新执行，因此全局的data对象没有被更新。

解决方案 #

方案1：直接修改全局data对象（推荐） #

这是最简单且安全的方式，无需操作script标签，直接更新内存中的对象属性：

document.getElementById("change").addEventListener("click", function () {
    // 直接修改data对象的属性
    data.key = "BCSD123";
    data.balance = "200";
    
    alert(data.key); // 此时会弹出新值BCSD123
});

方案2：重新执行修改后的脚本（不推荐，仅作参考） #

如果一定要通过修改script标签内容实现，需要删除旧的script标签，重新创建新的script元素插入页面，触发脚本执行：

document.getElementById("change").addEventListener("click", function () {
    const oldScript = document.getElementById("datas");
    const newScript = document.createElement("script");
    newScript.id = "datas";
    newScript.textContent = `data = {
        key: "BCSD123",
        balance: "200",
    };`;
    
    // 替换旧的script标签
    oldScript.parentNode.replaceChild(newScript, oldScript);
    
    alert(data.key); // 弹出新值BCSD123
});

注意：这种方式会重新定义全局data对象，可能带来意外副作用，除非有特殊需求，否则优先选择方案1。

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