JS创建的元素无法在DOM中显示是什么原因？附问题代码

• 你在给header添加子元素时错误引用了目标节点：你已经通过let heading = document.createElement("header")将创建的header节点存入了局部变量heading，但后续代码错误使用了document.heading来调用appendChild方法，而document对象本身不存在heading属性，取值为undefined，调用方法会直接抛出JS异常，中断后续代码执行，自然不会把创建的元素插入到页面中。

let heading=document.createElement("header");
let logo=document.createElement("div");
let menue=document.createElement("ul");
// 直接使用定义好的变量heading引用节点，无需加document前缀
heading.appendChild(logo);
heading.appendChild(menue);
document.body.prepend(heading);

如果修正上述问题后元素仍然视觉上不可见，可以检查以下两点：

• JS代码执行时机是否晚于DOM加载完成：可以将script标签放在</body>结束标签之前，或者把代码包裹在document.addEventListener('DOMContentLoaded', () => { /* 这里放上述代码 */ })中，避免执行时document.body还未初始化
• 给创建的元素添加内容或基础样式：默认空的div、ul元素没有宽高，视觉上无法感知，可以添加测试内容比如logo.textContent = '站点Logo'，或者给header设置最小高度heading.style.minHeight = '60px'、背景色heading.style.background = '#eee'验证元素是否正常插入

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