javascript - "innerHTML"是否依赖于事件处理程序？

Question

第一个:

function change(){
    document.getElementById("clr").style.backgroundColor="red";
    document.getElementById("test1").innerHTML="hwllo world";
}

第二个:

document.getElementById("test1").innerHTML="hwllo world";

第一个工作正常。但是当文件加载时，第二个不起作用。

Answer 1

Javascript 和 HTML 渲染按照它们在文件中找到的顺序执行。因此，如果您在渲染 HTML 元素之前执行一段 JS，那么 JS 代码将无法工作。

<小时/>

这将失败:

<script>
  document.getElementById("test1").innerHTML="hwllo world";
</script>
<div id="test1"></div>

<小时/>

这将按预期工作:

<div id="test1"></div>
<script>
  document.getElementById("test1").innerHTML="hwllo world";
</script>

<小时/>

或者，您可以使用各种 onload 和 dom read 事件来确保您的脚本在所有 HTML 渲染完成后执行:

<script>
  window.onload = function(){
    document.getElementById("test1").innerHTML="hwllo world";
  }
</script>
<div id="test1"></div>