JavaScript 中 Cannot set property ‘innerHTML’ of Null 错误
“Cannot set property ‘innerHTML’ of Null”错误的发生有两个原因：
- 将
innerHTML属性设置为空值（不存在的 DOM 元素）。 - 在声明 DOM 元素的 HTML 上方插入 JS 脚本标记。
下面是一个产生上述错误的示例代码
const el = null;
// ⛔️ Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
el.innerHTML = 'new value';要解决“Cannot set property ‘innerHTML’ of Null”错误，请确保要设置 innerHTML 属性的 DOM 元素存在。 如果我们使用 getElementById() 方法并向其传递一个 DOM 中不存在的 ID，则最常发生该错误。
const el = document.getElementById('does-not-exist');
console.log(el); // 👉️ null
// ⛔️ Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
el.innerHTML = 'new value';
DOM 中不存在具有提供的 id 的元素，因此 getElementById 方法返回空值。
当我们尝试将 innerHTML 属性设置为空值时，会发生错误。
出现错误的另一个常见原因是在声明 DOM 元素之前放置 JS 脚本标记。
要解决“Cannot set property ‘innerHTML’ of null”错误，需要确保在声明 HTML 元素后将 JS 脚本标记放置在正文的底部。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<!-- ⛔️ BAD - script is run before span exists ⛔️ -->
<script src="index.js"></script>
<span id="name">John</span>
</body>
</html>
JS 脚本标记添加在声明 span 元素的代码上方。 index.js 文件在创建 span 元素之前运行，因此我们无法从 index.js 文件访问该元素。
const el = document.getElementById('name');
console.log(el); // 👉️ null
// ⛔️ Cannot set properties of null (setting 'innerHTML')
el.innerHTML = 'Alice';
相反，必须将 JS 脚本标记移动到它尝试访问的 DOM 元素下方。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<span id="name">John</span>
<!-- ✅ GOOD - span already exists ✅ -->
<script src="index.js"></script>
</body>
</html>
现在我们可以从 index.js 文件访问 span 元素。
const el = document.getElementById('name');
console.log(el); // 👉️ null
// ✅ Works
el.innerHTML = 'Alice';
现在 HTML 元素是在 index.js 脚本运行之前创建的，我们可以访问 DOM 元素并设置它的 innerHTML 属性。
总结
在以下情况下会发生“Cannot set property ‘innerHTML’ of Null”错误：
- 尝试将
innerHTML属性设置为空值（不存在的 DOM 元素） - 在声明 DOM 元素之前插入 JS 脚本标签
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布，任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供，仅供学习和研究使用。如您对本站的相关版权有任何异议，或者认为侵犯了您的合法权益，请及时通知我们处理。
