JavaScript：未捕获的类型错误：无法读取 null 的属性“appendChild”答案

【问题标题】：JavaScript: Uncaught TypeError: Cannot read property 'appendChild' of nullJavaScript：未捕获的类型错误：无法读取 null 的属性“appendChild”
【发布时间】：2017-11-14 03:09:46
【问题描述】：

我是一名初学者，目前正在开发一款记忆卡游戏。请帮帮我。

这是我的错误消息适用的代码：

HTML

<div id="game-board" class="board clearfix"></div>

Javascript

var createBoard = function() {
    for (var i = 0; i < cards.length; i++) {
        var cardElement = document.createElement('img');
        cardElement.setAttribute('src', "images/back.png");
        cardElement.setAttribute('data-id', i);
        document.getElementsByTagName('img')[0].addEventListener('click', flipCard);
        document.querySelector('game-board').appendChild(cardElement);
    }
}


createBoard();

【问题讨论】：

粘贴你的html
我认为 querySelector 存在问题。如果基于类的选择使用 document.querySelector(".game-board");或基于 ID 的使用 document.querySelector("#game-board");

标签： javascript appendchild

【解决方案1】：

如果不将元素附加到 DOM，您将无法访问它们。作为您的代码，您正在创建 img 标签并尝试在附加它们之前访问它们。这是修改后的代码

document.getElementsByTagName('img')[0].addEventListener('click', flipCard);
document.querySelector('game-board').appendChild(cardElement);

var createBoard = function() {
    for (var i = 0; i < 5; i++) {
        var cardElement = document.createElement('img');
        cardElement.setAttribute('src', "images/back.png");
        cardElement.setAttribute('data-id', i);
        
        document.querySelector('.game-board').appendChild(cardElement);
        document.getElementsByTagName('img')[0].addEventListener('click', cardElement);
    }
}


createBoard();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='game-board' class='game-board'></div>

【讨论】：

感谢您的澄清。那讲得通;但是，当我在添加事件侦听器之前添加元素时，我仍然收到相同的错误消息。

【解决方案2】：

错误“无法读取 null 的属性 'appendChild'”意味着您的带有 appendChild 的行的计算结果为

null.appendChild(cardElement);

换句话说，document.querySelector('game-board') 的计算结果必须为 null，并且 null 没有 appendChild 方法。

解决方法：可能querySelector里面的选择器不对；检查docs。

如果游戏板是一个类，它应该是

document.querySelector('.game-board')

如果game-board是一个id，它应该是

document.querySelector('#game-board')

【讨论】：

这很有见地，帮助我更好地理解错误信息；但是，在为 id 添加正确的语法后，错误消息仍然出现。
您是否尝试过@sheplu 将代码移到文件末尾？如果你的代码在<div id="game-board" ...的定义之前，那么document.querySelector函数找不到它，因为div还没有加载。