title: Create Button Element in JavaScript
body: <p>I'm trying to create a button element in <code>javascript</code> without using <code>jQuery</code>. </p>
  
  <p>I keep getting an error when I try to append it to the DOM.</p>
  
  <blockquote>
    <p>"Cannot read property 'appendChild' of null" </p>
  </blockquote>
  
  <p>I've looked everywhere and couldn't find out how to create a button. In the w3Schools example they are using a function on a button element that was already created in the HTML, which isn't what I'm trying to do. Here's what I have.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html lang="en"&gt; 
  &lt;head&gt; 
  meta charset="UTF-8"&gt; 
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; 
  &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt; 
  &lt;title&gt;Document&lt;/title&gt; 
  &lt;script src="myapp.js"&gt;&lt;/script&gt; 
  &lt;/head&gt; 
  &lt;body&gt; 
  &lt;div id="btn"&gt;Button Here&lt;/div&gt; 
  &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>myapp.js</strong></p>
  
  <pre><code>var element = document.createElement("button");
  element.appendChild(document.createTextNode("Click Me!"));
  var page = document.getElementById("btn");
  page.appendChild(element);
  console.log(element);
  </code></pre>