Question

无法将属性“innerHTML”设置为 null，为什么我会收到此错误

2017-08-20

8764

javascript html javascript-objects innerhtml dom-events

<!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。请给我一些答案。

Answer 1

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

或者将您的代码更改为：

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

Answer 2

将您的类更改为 id，因为您正在使用 getElementById，因此

Getdocumentbyid 将基于 ID 进行搜索

如果您想按类使用，请按如下方式使用

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

Answer 3

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

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