开发者问题收集

如何修复“未捕获的类型错误：无法调用 null 的方法‘appendChild’”

2013-02-18
26414
javascript append appendchild

我试图从 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);
}
3个回答

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

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

如果由于某种原因您无法移动脚本标记，请尝试运行使用 $(document).ready() (jQuery) 或等效代码 分配变量的代码。

fresskoma
2013-02-18

如果所需元素存在，您的代码将有效。如您在 此 Fiddle 中看到的那样。

如果 HTML 类似于以下内容，则有效： 

<div id="comments">
    <input id="textBox" type="textBox" value="Hello" />
</div>

我猜其中一个标识符可能拼写错误，或者您期望的元素不存在。

但是，如果您在外部文件中运行脚本，它可能会尝试在文档完全加载之前执行，因此您的脚本引用的是 DOM 中尚未 准备好 的元素。

在 jQuery 中，您可以用 $(document).ready(function(){// your code here..}) 包裹。
此 SO 帖子中有一些关于如何仅使用 JavaScript 执行此操作的详细信息： 没有 jQuery 的 Document Ready 等效版本 。

Nope
2013-02-18

实际上，他的代码没有问题。只是 JavaScript 在 HTML 之前运行。一个简单的解决方法是将所有代码嵌套在任意名称的函数中。然后使用 window.onload 在 HTML 加载后运行该函数。所以基本上： 

window.onload = function any_name()
{
//code to be executed
}

这很有用，特别是当您不想移动脚本标签时。我通常喜欢将标签留在原处。

Brendan
2014-02-27