JavaScript报错TypeError: divOutput is null：循环后页面无法显示内容

嘿，这个问题我太熟了！你碰到的TypeError: divOutput is null本质上是DOM加载顺序不匹配导致的，我来给你拆解下原因和解决办法：

问题根源 #

你把<script>标签放在了HTML的<head>区域里，浏览器是从上到下解析HTML文档的：当它执行output.js里的代码时，<body>中的<div id="text">还没被渲染到页面上，这时候你用document.getElementById('text')（或者类似方法）获取元素，自然会返回null，后续再对这个null对象做操作（比如赋值innerHTML）就会抛出报错。

三种可行的解决方案 #

1. 把脚本移到<body>末尾（最简单直接） #

等页面所有DOM元素都加载完成后，再执行JavaScript代码。修改你的HTML结构：

<!DOCTYPE html> 
<html> 
<head> 
    <title>JavaScript ES2015 Practice</title>
</head> 
<body> 
    <div id="text"> </div>
    <!-- 将脚本移到body最后，确保DOM已加载 -->
    <script type="text/javascript" src="js/output.js"></script>
</body>
</html>

2. 监听DOM加载完成事件 #

如果不想移动脚本位置，可以在output.js中添加DOMContentLoaded事件监听，等DOM完全准备好再执行你的逻辑：

// 等DOM加载完成后再执行代码
document.addEventListener('DOMContentLoaded', function() {
    // 这里写你原来的逻辑：获取元素、处理html变量、插入内容
    const divOutput = document.getElementById('text');
    // 假设你的html变量是拼接好的页面内容
    divOutput.innerHTML = html;
});

3. 给脚本添加defer属性 #

给<head>里的<script>标签加上defer属性，浏览器会先解析完整个HTML文档，再执行脚本代码：

<head> 
    <title>JavaScript ES2015 Practice</title>
    <!-- 添加defer属性，延迟脚本执行 -->
    <script type="text/javascript" src="js/output.js" defer></script>
</head>

注意：defer仅对外部脚本有效，并且会按照脚本的引入顺序依次执行。

额外检查点 #

别忘了确认你的JavaScript代码中，获取元素的ID和HTML里的id="text"完全一致，别出现拼写错误（比如把text写成output），这也会导致获取不到元素返回null。

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