How to fix "Uncaught TypeError: Cannot call method 'appendChild' of null"

Question

I am attempting to grab text from a HTML text area, and call the create() method when a 'Submit' button is pressed. The method is trying to use the message from the text area, and post that to its own p tag with class, and post a date stamp in its own p tag, and its own class.

These will both be in the div 'comments'. The error I am getting (using developer tools in Chrome), is

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

This is aimed at "cmt.appendChild(divTag);". I am very new to Javascript, and this is just practise for me to increase my skills. All help is greatly appreciated!

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

The error you are getting suggests that there is no element with the ID "comments" on your page. document.getElementById will return null when no element with such an ID is found, and thus cmd.appendChild(divTag) will be executed as null.appendChild(divTag).

If you are certain that the element exists, you may be executing your JavaScript that assigns the cmt variable before that element is created by the browser. To prevent that, standard practice is to place the <script> tag which includes your external JavaScript just before the closing </body> tag.

If you can't move your script tag for some reason, try running the code that assigns the variable with $(document).ready() (jQuery) or equivalent.