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

Doesn't look like it does, at least not at the time the script runs, else it wouldn't be null — CertainPerformance
– 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
– 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
– kmulqueen, Commented Jun 24, 2018 at 2:52

Lee Taylor · Accepted Answer · 2019-09-09 22:10:18Z

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

groksrc · Accepted Answer · 2018-06-24 02:52:58Z

0

It's likely that page is the object that is undefined. Here's a fiddle with a working example:

https://jsfiddle.net/2Lon63uj/

answered Jun 24, 2018 at 2:52

groksrc

3,0451 gold badge31 silver badges29 bronze badges

Comments

fyasir · Accepted Answer · 2018-06-24 02:57:31Z

0

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>

edited Jun 24, 2018 at 2:57

answered Jun 24, 2018 at 2:52

fyasir

2,9902 gold badges26 silver badges36 bronze badges

Comments

mobfire · Accepted Answer · 2018-06-24 04:13:04Z

0

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.

answered Jun 24, 2018 at 4:13

mobfire

194 bronze badges

Comments

Mostafa AboBaker · Accepted Answer · 2019-09-09 22:05:12Z

0

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>

answered Sep 9, 2019 at 22:05

Mostafa AboBaker

2282 silver badges6 bronze badges

Collectives™ on Stack Overflow

Create Button Element in JavaScript

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related