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...

Answer: 
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.
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>

```