JS动态创建div后getElementById获取元素打印控制台失效问题

问题排查方向 #

你的代码无法正常运行，核心问题集中在语法错误、API调用错误两个维度，逐行核对就能定位：

• 首先看浏览器控制台的报错信息，语法错误、不存在的方法调用都会直接标注错误行号，是最高效的排查入口
• 核对DOM API拼写，JS是大小写敏感语言，方法名、属性名大小写错误会直接触发引用错误
• 核对代码括号、引号的配对情况，漏写闭合符号会导致整段代码解析失败
• 确认操作的父节点parentEl是已经被正确获取、且挂载到当前文档树的有效DOM节点

具体错误点 #

1. API拼写错误：你调用的document.getElementbyId是不存在的方法，正确方法名是document.getElementById，其中Id的首字母I必须大写
2. 语法错误：console.log的调用语句缺少右闭合括号，代码解析阶段就会中断
3. 逻辑冗余：你通过createElement创建div时，已经把元素实例保存在divList变量中，不需要再通过ID二次查询DOM，直接打印这个变量即可，还能规避元素未挂载到文档树时查询不到的问题

修正后可运行代码 #

// 请确保parentEl是有效的已挂载DOM节点，此处以body为示例
const parentEl = document.body;
let divList = document.createElement('div')
// 设置ID的简写方式，和setAttribute效果一致
divList.id = "container"
parentEl.appendChild(divList)

// 推荐方式：直接打印已持有的元素引用，不需要二次查询DOM
console.log(divList)
// 修正API拼写和语法后的ID查询方式
console.log(document.getElementById('container'))

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