创建DOM元素报错：Uncaught TypeError: Cannot read properties of null (reading 'appendChild')

错误原因 #

脚本执行时document.body尚未被浏览器解析创建。你的脚本放在<head>标签内，即便添加了defer，部分场景下仍会早于<body>元素加载完成的时机执行，此时document.body为null，调用appendChild自然报错。

解决方法 #

方法1：将脚本移至<body>末尾

这是最可靠的方案，确保脚本执行时<body>已完全加载：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Result</title>

    <style>
        .chart-container {
            position: relative;
            height: 40vh;
            width: 80vw;
        }
    </style>
</head>
<body>
    <h1>Metrics Information:</h1>

    <script>
        var divContainer = document.createElement('div');
        divContainer.className = 'chart-container';
        document.body.appendChild(divContainer);

        // ... REST OF THE SCRIPT
    </script>
</body>
</html>

方法2：监听DOMContentLoaded事件

若必须保留脚本在<head>中，可通过监听DOM加载完成事件延迟执行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Result</title>

    <style>
        .chart-container {
            position: relative;
            height: 40vh;
            width: 80vw;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            var divContainer = document.createElement('div');
            divContainer.className = 'chart-container';
            document.body.appendChild(divContainer);

            // ... REST OF THE SCRIPT
        });
    </script>
</head>
<body>
    <h1>Metrics Information:</h1>
</body>
</html>

方法3：检查document.body存在性（兜底方案）

如果坚持使用defer但仍有问题，可通过循环检查确保document.body存在后再执行：

<script defer>
    function init() {
        if (!document.body) return setTimeout(init, 10);
        
        var divContainer = document.createElement('div');
        divContainer.className = 'chart-container';
        document.body.appendChild(divContainer);

        // ... REST OF THE SCRIPT
    }
    init();
</script>

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