I'm trying to create a button element in javascript without using jQuery.
I keep getting an error when I try to append it to the DOM.
"Cannot read property 'appendChild' of null"
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.
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);
I'm trying to create a button element in javascript without using jQuery.
I keep getting an error when I try to append it to the DOM.
"Cannot read property 'appendChild' of null"
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.
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);
-
Looks like
#btndoesn't exist. – CertainPerformance Commented Jun 24, 2018 at 2:47 - it exists as a div in my html – kmulqueen Commented Jun 24, 2018 at 2:48
-
Doesn't look like it does, at least not at the time the script runs, else it wouldn't be
null– CertainPerformance Commented Jun 24, 2018 at 2:50 - It is hard to help you without seeing your HTML and the JS in action. Please create a minimal reproducible example. – Victoria Ruiz Commented Jun 24, 2018 at 2:51
- so I have a div inside of my html with the id "btn". I'm trying to create a button element in javascript and append that button to the div with the id of button. I know this sounds stupid... I'm just trying to practice and get familiar with javascript. – kmulqueen Commented Jun 24, 2018 at 2:52
5 Answers
Reset to default 6Your script is running before the DOM has finished loading, so before your 'btn' div exists. There are a few simple solutions to this. One is moving your script tag to the bottom of the body, eg:
<!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>
The other, better, solution is adding a line to your script to make sure the HTML has loaded before the script runs.
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"".
It's likely that page is the object that is undefined. Here's a fiddle with a working example:
https://jsfiddle/2Lon63uj/
Working demo here
function createButton() {
var element = document.createElement("button");
element.appendChild(document.createTextNode("Click Me!"));
var page = document.getElementById("btn");
page.appendChild(element);
console.log(element);
}
createButton();<div id="btn">
</div>Are you sure your HTML file can see your script. Why not try running small tests on the console window. View of the output of those elements and see if it gives null.
function myFunction() {
var btn = document.createElement("BUTTON");
btn.innerHTML = "CLICK ME";
document.body.appendChild(btn);
}<!DOCTYPE html>
<html>
<body>
<p>Click the button to make a BUTTON element with text.</p>
<button onclick="myFunction()">Try it</button>
</body>
</html>