Create Button Element in JavaScript
Question
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);
5 answers
solution1
4 2018-06-24 03:21:03
Your 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"".
solution2
0 2018-06-24 02:52:06
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>
solution3
0 2018-06-24 02:52:58
It's likely that page is the object that is undefined. Here's a fiddle with a working example:
solution4
0 2018-06-24 04:13:04
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.
solution5
0 2019-09-09 22:05:12
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.