DOM操作遇Uncaught TypeError，defer/async等方案无效求助

你遇到的问题根本不是脚本执行时机的问题（defer/async/放底部这类方案解决的是时机问题），而是元素选择器与HTML元素不匹配加上HTML属性写错导致的：

核心错误点 #

1. HTML属性语法错误：原生HTML定义类名要用class属性，你写成了className="container"——这是React框架的语法，原生HTML不识别，所以这个div的类名根本没生效。
2. 选择器不匹配：你的JS代码用document.querySelector('#container')（id选择器，目标是id="container"的元素），但HTML里的div既没有正确的class，也没有id为container的属性，自然找不到元素，container变量就是null，调用appendChild就会报错。

为什么defer/async/放底部都没用？ #

这些方案的作用是让脚本在DOM加载完成后执行，但前提是目标元素确实存在于DOM中。你的问题是元素本身的定义就有错误，就算脚本等DOM加载完再执行，依然找不到对应的元素，所以不管怎么调整脚本位置或属性，都会报同样的错。

修正方案（二选一即可） #

方案1：修正HTML的元素属性（用id匹配JS的选择器） #

把HTML里的className="container"改成id="container"：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>DOM Manipulation</title>
  <script defer src="index.js"></script>
</head>

<body>
  <h1>THE TITLE OF YOUR WEBPAGE</h1>
  <div id="container"></div>
</body>

</html>

方案2：修正JS的选择器（用类选择器匹配HTML的class） #

把JS里的#container改成.container，同时修正HTML的className为class：

const container = document.querySelector('.container');

const content = document.createElement('div');
content.classList.add('content');
content.textContent = 'This is the glorious text-content!';

container.appendChild(content);

const para = document.createElement('p');
para.classList.add('para');
para.textContent = 'This is the fun times!';

container.appendChild(para);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>DOM Manipulation</title>
  <script defer src="index.js"></script>
</head>

<body>
  <h1>THE TITLE OF YOUR WEBPAGE</h1>
  <div class="container"></div>
</body>

</html>

关于你之前误写代码生效的原因 #

你之前把createElement("div")写成querySelector("div")时，代码能找到页面上的第一个div（也就是那个写错属性的div），所以能执行appendChild；但后来改回正确的createElement逻辑后，又用了#container选择器，找不到元素就报错了。

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