html - Crear elemento de botón en JavaScript

Estoy intentando crear un elemento botón en javascript sin usar jQuery.

Sigo recibiendo un error cuando intento agregarlo al DOM.

"No se puede leer la propiedad 'appendChild' de null"

He buscado por todas partes y no pude averiguar cómo crear un botón. En el ejemplo de w3Schools están utilizando una función en un elemento de botón que ya fue creado en el HTML, lo cual no es lo que estoy intentando hacer. Aquí está lo que tengo.

HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<title>Document</title> 
<script src="myapp.js"></script> 
</head> 
<body> 
<div id="btn">Button Here</div> 
</body> 
</html>

myapp.js

var element = document.createElement("button");
element.appendChild(document.createTextNode("Click Me!"));
var page = document.getElementById("btn");
page.appendChild(element);
console.log(element);

Respuesta #1

Tu script se está ejecutando antes de que el DOM haya terminado de cargarse, por lo que antes de que exista tu div 'btn'. Hay algunas soluciones simples para esto. Una es mover tu etiqueta de script al final del body, por ejemplo:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<title>Document</title> 
</head> 
<body> 
<div id="btn">Button Here</div> 
<script src="myapp.js"></script> 
</body> 
</html>

La otra solución, mejor, es añadir una línea a tu script para asegurarte de que el HTML se haya cargado antes de que el script se ejecute.

document.addEventListener("DOMContentLoaded", function() {
     var element = document.createElement("button");
     element.appendChild(document.createTextNode("Click Me!"));
     var page = document.getElementById("btn");
     page.appendChild(element);
     console.log(element);
 });

 // Corrected "meta charset="UTF-8"".

Respuesta #2

Es probable que page sea el objeto que está indefinido. Aquí hay un ejemplo funcional en un fiddle:

https://jsfiddle.net/2Lon63uj/