如何修复元素不存在时出现的Cannot set property 'innerHTML' of null报错

你编写的代码存在三处问题，是触发报错的核心原因：

• 未预先判断元素是否存在：当页面没有id为header的元素时，document.getElementById('header')会返回null，直接对null访问innerHTML属性会抛出类型错误
• 语法错误：判断条件的右括号未闭合，本身会触发语法报错
• 逻辑冗余：innerHTML的返回值永远为字符串类型，不存在为null的情况，原判断条件本身不成立

修复代码 #

你可以先获取元素实例，确认存在后再执行赋值操作，同时避免重复查询DOM：

const headerEle = document.getElementById('header')
if (headerEle) {
  headerEle.innerHTML = 'Submitted'
}

如果你的项目兼容ES2020及以上语法，也可以用可选链语法简化写法：

document.getElementById('header')?.innerHTML = 'Submitted'

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