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: 
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); 

   }

```
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);

  }

```