如何在HTML元素内动态创建并添加子元素？

1. 确保JS代码在DOM加载完成后执行 #

如果你的JS代码写在<head>标签内，或者位于<main id="results">元素之前，浏览器会优先执行JS逻辑，此时#results还未被浏览器解析渲染，document.querySelector("#results")会返回null——部分环境下不会抛出明显报错，最终导致元素无法添加。

解决办法：

• 将JS代码放在</body>闭合标签前：

<main id="results"></main>
<script>
let newParagraph = document.createElement("p");
let newParagraphText = document.createTextNode("ipsom lorem");

newParagraph.appendChild(newParagraphText);

let results = document.querySelector("#results");

results.appendChild(newParagraph);
</script>
</body>

• 或者监听DOMContentLoaded事件，确保DOM加载完成后再执行代码：

document.addEventListener('DOMContentLoaded', function() {
  let newParagraph = document.createElement("p");
  let newParagraphText = document.createTextNode("ipsom lorem");

  newParagraph.appendChild(newParagraphText);

  let results = document.querySelector("#results");

  results.appendChild(newParagraph);
});

2. 检查页面是否存在重复ID的元素 #

如果页面内有多个id="results"的元素，querySelector只会返回第一个匹配项。若你要添加元素的目标不是第一个，自然看不到效果。可以打开浏览器开发者工具（F12），在Elements面板搜索#results，确认只有一个目标<main>元素。

3. 简化代码排查元素获取问题 #

先简化代码，验证是否能正确获取到目标元素：

let results = document.querySelector("#results");
console.log(results); // 查看控制台是否输出<main id="results">...</main>
if(results) {
  results.textContent = "测试文本";
}

如果控制台能正确输出目标元素，再逐步恢复创建p元素的逻辑。

4. 检查是否有CSS隐藏了元素 #

有时候元素已成功添加到DOM，但被CSS设置为display: none、visibility: hidden或opacity: 0，导致肉眼无法看到。可以打开开发者工具的Elements面板，查看<p>元素是否存在，同时检查它的样式属性。

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