Javascript error - cannot call method 'appendChild' of null

Question

I am new to Javascript (and programming in general) and have been trying to get a basic grasp on working with the DOM. Apologies if this is a very basic mistake, but I looked around and couldn't find an answer.

I am trying to use the appendChild method to add a heading and some paragraph text into the in the very basic HTML file below.

    <html> 
<head>
    <title>JS Practice</title>  
</head>
<body>
    <script src="script.js"></script> 
    <div id = "main">
        <h1>Simple HTML Page</h1>
        <p>This is a very simple HTML page.</p>
        <p>It's about as basic as they come. It has: </p>
        <ul>
            <li>An H1 Tag</li>
            <li>Two paragraphs</li>
            <li>An unordered list</li>
        </ul>
    </div>
    <div id="javascript">
    </div>
</body>
</html>

Here is the js code:

var newHeading = document.createElement("h1"); 
var newParagraph = document.createElement("p"); 

newHeading.innerHTML = "New Heading!"; 
newParagraph.innerHTML = "Some text for a paragraph."; 

document.getElementById("javascript").appendChild(newHeading); 
document.getElementById("javascript").appendChild(newParagraph);

Running it causes an error: "Cannot call method 'appendChild' of null"

Help? I can't figure out why this isn't working...

score 65 · Accepted Answer · answered Dec 29 '11 at 16:38

Assuming this code is inside the script.js file, this is because the javascript is running before the rest of the HTML page has loaded.

When an HTML page loads, when it comes across a linked resource such as a javascript file, it loads that resource, executes all code it can, and then continues running the page. So your code is running before the <div> is loaded on the page.

Move your <script> tag to the bottom of the page and you should no longer have the error. Alternatively, introduce an event such as <body onload="doSomething();"> and then make a doSomething() method in your javascript file which will run those statements.

score 13 · Answer 2 · answered Feb 27 '14 at 21:40

There is an easier way to resolve this issue. Put your JavaScript inside of a function and use the window.onload. So for instance:

window.onload = function any_function_name()
{

var newHeading = document.createElement("h1"); 
var newParagraph = document.createElement("p"); 

newHeading.innerHTML = "New Heading!"; 
newParagraph.innerHTML = "Some text for a paragraph."; 

document.getElementById("javascript").appendChild(newHeading); 
document.getElementById("javascript").appendChild(newParagraph); 
}

Now, you do not have to move your tag because that will run your code after the HTML has loaded.

score 9 · Answer 3 · answered Dec 29 '11 at 16:37

Your script is running before the elements are available.

Place your script directly before the closing </body> tag.

<html> 
<head>
    <title>JS Practice</title>  
</head>
<body>
    <div id = "main">
        <h1>Simple HTML Page</h1>
        <p>This is a very simple HTML page.</p>
        <p>It's about as basic as they come. It has: </p>
        <ul>
            <li>An H1 Tag</li>
            <li>Two paragraphs</li>
            <li>An unordered list</li>
        </ul>
    </div>
    <div id="javascript">
    </div>

    <!-- Now it will run after the above elements have been created -->
    <script src="script.js"></script> 
</body>
</html>

score 1 · Answer 4 · edited Feb 09 '18 at 15:39

1

I add an event listener to wait for DOM content to fully load

document.addEventListener("DOMContentLoaded", function() {
    place_the_code_you_want_to_run_after_page_load
})

edited Feb 09 '18 at 15:39

Dmitry

2,026
1
18
22

answered Sep 16 '16 at 03:19

Eric Hebel

11
2

score 1 · Answer 5 · answered May 09 '17 at 09:10

Your DOM is not loaded, so getElementById will return null, use document.ready() in jquery

   $(document).ready(function(){

    var newHeading = document.createElement("h1"); 
    var newParagraph = document.createElement("p"); 

    newHeading.innerHTML = "New Heading!"; 
    newParagraph.innerHTML = "Some text for a paragraph."; 

    document.getElementById("javascript").appendChild(newHeading); 
    document.getElementById("javascript").appendChild(newParagraph); 

   }

score 0 · Answer 6 · edited Jun 06 '17 at 08:09

Because your JavaScript file is loaded first, and that time when you write window.document.body.appendChild(btn), body element is not loaded in html, that's why you are getting error here, you can load the js file once body element is loaded in DOM.

index.html

<html>
     <head>
         <script src="JavaScript.js"></script>      
     </head>
     <body onload="init()">
          <h3> button will come here</h3>
     </body>
</html>

JavaScript.js

function init(){

   var button = window.document.createElement("button");

   var textNode = window.document.createTextNode("click me");

   button.appendChild(textNode);

   window.document.body.appendChild(button);

  }

Javascript error - cannot call method 'appendChild' of null

6 Answers6

Linked

Related