html - Skapa knapp-element i JavaScript

Jag försöker skapa ett knappelement i javascript utan att använda jQuery.

Jag får hela tiden ett felmeddelande när jag försöker lägga till det i DOM:en.

Kan inte läsa egenskapen 'appendChild' av null

Jag har letat överallt och kunde inte ta reda på hur man skapar en knapp. I w3Schools-exemplet använder de en funktion på ett knapp-element som redan skapats i HTML, vilket inte är vad jag försöker göra. Här är vad jag har.

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

Svar #1

Ditt skript körs innan DOM har hunnit laddas klart, alltså innan din 'btn'-div existerar. Det finns några enkla lösningar på detta. En är att flytta din script-tagg till slutet av body, t.ex.:

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

Den andra, bättre, lösningen är att lägga till en rad i ditt skript för att säkerställa att HTML har laddats innan skriptet körs.

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

Svar #2

Det är troligt att page är objektet som är odefinierat. Här är ett exempel i en fiddle som fungerar:

https://jsfiddle.net/2Lon63uj/