title: Javascript error - cannot call method 'appendChild' of null
body: <p>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. </p>
  
  <p>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. </p>
  
  <pre><code>    &lt;html&gt; 
  &lt;head&gt;
      &lt;title&gt;JS Practice&lt;/title&gt;  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt; 
      &lt;div id = "main"&gt;
          &lt;h1&gt;Simple HTML Page&lt;/h1&gt;
          &lt;p&gt;This is a very simple HTML page.&lt;/p&gt;
          &lt;p&gt;It's about as basic as they come. It has: &lt;/p&gt;
          &lt;ul&gt;
              &lt;li&gt;An H1 Tag&lt;/li&gt;
              &lt;li&gt;Two paragraphs&lt;/li&gt;
              &lt;li&gt;An unordered list&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div id="javascript"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the js code: </p>
  
  <pre><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); 
  </code></pre>
  
  <p>Running it causes an error: "Cannot call method 'appendChild' of null"</p>
  
  <p>Help? I can't figure out why this isn't working... </p>