Question

<!DOCTYPE HTML>
<html>
<head>
<script>
document.write("TEST1")
document.getElementById("demo").innerHTML="TEST2"
document.write("TEST3")
</script>
</head>

<body>
<p id="demo">TO_BE_REPLACED</p>
</body>
</html>

这是输出： TEST1

TO_BE_REPLACED

似乎javascript执行在document.getElementById("demo").innerHTML="TEST2"停止了。为什么不执行？

Answer 1

运行脚本时，<p id="demo"> 尚不存在。因此，document.getElementById('demo')正在返回null，然后在您尝试分配null.innerHTML = "TEST2"时触发错误

此错误会停止所有执行，因此您永远无法看到最终的TEST3。

Answer 2

您需要将脚本包含在窗口加载时将调用的函数中（使用“window.onload”事件）。

<!DOCTYPE HTML>
<html>
<head>
<script>
    function replaceDemoText()
    {
        document.getElementById("demo").innerHTML="TEST2";
    }
    window.onload = replaceDemoText;
</script>
</head>

<body>
<p id="demo">TO_BE_REPLACED</p>
</body>
</html>

javascript - 为什么innerHTML替换不运行？

2 个答案: