document.getElementById('id').innerHTML="some value" 更改不反映答案

【问题标题】：document.getElementById('id').innerHTML="some value" changes don't reflectdocument.getElementById('id').innerHTML="some value" 更改不反映
【发布时间】：2014-11-07 08:48:36
【问题描述】：

我有下面提到的代码，innerHTML 所做的更改不会反映在浏览器中

<body>

<script TYPE="text/javascript">
    function change(){
        document.getElementById("op").innerHTML="this works!";
        prompt(document.getElementById("op").innerHTML);
    }
</script>

<form onSubmit="change()">
    <table>
        <tr>
            <td id="a1">This</td>
           <td id="a2"><input type="text" id="t1"></td>
        </tr>
    </table>
    <input type="submit" value="submit">
</form>

// 输出

    <table>
        <tr><td id="op"></td></tr>
    </table>

    </body>
</html>

如提示所示，更改确实发生了，但不会反映在页面上。

【问题讨论】：

代码执行完毕后，页面将更新。 jsfiddle.net/8gq155ap
jsfiddle.net/arunpjohny/k76tadte/1

标签： javascript html forms submit innerhtml

【解决方案1】：

JavaScript 是单线程的。在将值分配给innerHTML 的函数完成之前，浏览器不会运行重绘事件。

在清除提示（这是一个阻塞功能）之前，该功能不会完成。

此时，由于它是由提交按钮触发的，因此将立即提交表单并加载一个新页面（该页面会将表格单元格的内容恢复为原始状态）。

取消表单的默认事件。

90年代风格：

function change()
{
  document.getElementById("op").innerHTML="this works!";
  prompt(document.getElementById("op").innerHTML);
  return false;
}

onSubmit="return change()">

现代风格：

function change(event)
{
  event.preventDefault();
  document.getElementById("op").innerHTML="this works!";
  prompt(document.getElementById("op").innerHTML);
}
document.querySelector('form').addEventListener("submit", change);

【讨论】：

这在 Firefox 中可能是正确的，但在 Chrome 中（刚刚测试），它确实会触发重绘，因为线程被 prompt 暂停（有/没有preventDefault）