document.write()与innerHTML无法写入HTML页面的问题求助

算力阿峰

2026-5-26

问题出在脚本执行时机不对！

哈哈，这个坑我刚学JS的时候也踩过！你的代码本身逻辑没问题，但浏览器解析页面是从上到下顺序执行的，如果你的<script>标签放在了<div id="output">的前面（比如<head>里面），那当JS代码运行时，页面上的output元素还没被浏览器加载出来呢！

这时候document.getElementById("output")会返回null，你对null调用.innerHTML当然不会有任何效果；至于document.write()，如果是在DOM未完全加载时执行，它会把内容插入到脚本所在的位置（比如<head>里，你可能看不到），如果是DOM加载完成后执行，它会直接清空整个页面，这显然不是你想要的。

几个快速修复方案：

1. 把脚本移到页面底部（最直接）

把你的<script>标签放到</body>标签的前面，确保页面上所有DOM元素都加载完成后再执行JS：

<body>
  <!-- 先放你的output元素 -->
  <div id="output"></div>

  <!-- 脚本放在这里 -->
  <script type="text/javascript"> 
    var print = document.getElementById("output"); 
    print.innerHTML = "hello world"; 
    // 建议尽量别用document.write()，容易出各种问题
  </script>
</body>

2. 用DOMContentLoaded事件等待DOM加载

如果不想移动脚本位置，可以监听DOMContentLoaded事件，等浏览器把所有DOM元素都解析完成后再执行代码：

<script type="text/javascript"> 
  document.addEventListener('DOMContentLoaded', function() {
    var print = document.getElementById("output"); 
    print.innerHTML = "hello world"; 
  });
</script>