无法将属性“innerHTML”设置为 null 为什么会出现此错误答案

【问题标题】：Cannot set property 'innerHTML' of null why am I getting this error无法将属性“innerHTML”设置为 null 为什么会出现此错误
【发布时间】：2018-01-28 16:33:48
【问题描述】：

<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div class="demo">heoo</div>
  <script>
    var person = {
      name: "john",
      age: 50
    };
    var result = person.name;
    document.getElementById('demo').innerHTML = result;
  </script>
</body>
</html>

我想将 person 对象属性值显示到 div 中，但它是显示无法将 innerHTML 设置为 null。请给我一些答案。

【问题讨论】：

一个类不是一个id

标签： javascript html javascript-objects innerhtml dom-events

【解决方案1】：

将class="demo" 更改为id="demo"

或者您的代码：

document.getElementsByClassName('demo')[0].innerHTML= result;

【讨论】：

【解决方案2】：

将您的班级更改为 id 因为您使用的是 getElementById 所以

Getdocumentbyid 将根据 ID 进行搜索

如果你想按类使用，那么使用如下

var y = document.getElementsByClassName('demo'); y[0].innerHTML= 结果；

【讨论】：

感谢您的回答，我真的为你们感到骄傲，谢谢

【解决方案3】：

document.getElementById('demo') 正在尝试从您的 Html 文档中获取带有 id="demo" 的元素。它不会在您的 Html 中找到任何元素，因为它没有任何带有 id="demo" 的元素。

您可以通过将 div class 更改为 id（即 <div id="demo"> 而不是 <div class="demo">）来解决您的问题，或者通过更改从 javascript 获取该元素的方式：@987654329 @而不是document.getElementById('demo')

【讨论】：