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 .

Answer 2

Your code works if the required elements exist. As you can see in this Fiddle .

Works if HTML is similar to:

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

My guess is that one of the identifiers might be misspelled or the element as you expect it does not exist.

However, if you are running the script in an external file it might try to execute before the document is fully loaded, hence your script is referring to elements not yet ready in the DOM.

In jQuery you would wrap a $(document).ready(function(){// your code here..}) around.
There is some details on how to do this in just JavaScript in this SO post: Documen Ready equivalent without jQuery .

Answer 3

Actually, his code is fine. Its just that JavaScript runs BEFORE HTML. A simple fix is to nest all of your code inside of a function with any name. Then use window.onload to run the function after the HTML is loaded. so basically:

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

This is useful especially if you do not want to move your script tag. I generally like to leave the tag where it is.