CODEWITHSUNDEEP
javascripthtmlbuttonelementcreateelement
kmulqueen
kmulqueen

Reputation: 79

Create Button Element in JavaScript

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

Upvotes: 6

Views: 29142

Answers (5)

n-a-t-e
n-a-t-e

Reputation: 181

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

Upvotes: 6

Mostafa AboBaker
Mostafa AboBaker

Reputation: 228

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>

Upvotes: 0

mobfire
mobfire

Reputation: 19

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.

Upvotes: 0

fyasir
fyasir

Reputation: 2970

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>

Upvotes: 0

groksrc
groksrc

Reputation: 3025

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

https://jsfiddle.net/2Lon63uj/

Upvotes: 0

Related Questions