javascript - 如何修复 "Uncaught TypeError: Cannot call method ' appendChild' of null"

Question

我试图从 HTML 文本区域抓取文本，并在按下“提交”按钮时调用 create() 方法。该方法尝试使用来自文本区域的消息，并将其发布到它自己的带有类的 p 标签，并在它自己的 p 标签和它自己的类中发布日期戳。

这些都将出现在 div 的“评论”中。我得到的错误(在 Chrome 中使用开发者工具)是

Uncaught TypeError: Cannot call method 'appendChild' of null.

这是针对“cmt.appendChild(divTag);”。我是 Javascript 的新手，这只是我提高技能的练习。非常感谢所有帮助!

var cmt = document.getElementById('comments');

function create() {

    var username = 'User',
        message = document.getElementById("textBox").value,
        divTag = document.createElement('div'),
        p1 = document.createElement('p'),
        p2 = document.createElement('p');

    divTag.className = 'comment';

    p1.className = 'date';
    p1.innerHTML = new Date();
    divTag.appendChild(p1);

    p2.className = 'message';
    p2.innerHTML = username + ': ' +message;
    divTag.appendChild(p2);

    cmt.appendChild(divTag);
}

Answer 1

您遇到的错误表明您的页面上没有 ID 为“comments”的元素。 document.getElementById 将返回 null当没有找到具有此类 ID 的元素时，因此 cmd.appendChild(divTag)将被执行为 null.appendChild(divTag) .

如果您确定该元素存在，您可能正在执行分配 cmt 的 JavaScript变量在浏览器创建该元素之前。为防止这种情况，标准做法是放置 <script>包含您的外部 JavaScript 的标记 就在结束之前 </body>标记。

如果由于某种原因你不能移动你的脚本标签，尝试运行用$(document).ready() 分配变量的代码。 (jQuery) or equivalent .