Create an HTML button using JavaScript

There might come a situation where you'll need to create an HTML button programmatically. In this post, we'll learn how to use JavaScript to create an HTML button.
The Basics
To keep it simple, we'll create a button that has the text Click here
.
Here's how that looks like:
const button = document.createElement("button");
button.innerText = "Click here";
document.body.appendChild(button);
First, we used the document.createElement()
method to create a new button
element.
Then, we used the .innerText
property to set the text of the button to Click here
.
Finally, we used the .appendChild()
method to add the button to the body
of the document.
This will result in this HTML:
<body>
<button>Click here</button>
</body>
Going Further
In most cases, just changing the text of the button isn't enough. You'll probably want to change the type
, name
and perhaps add a class
attribute.
Here's how to do this programmatically in JavaScript:
const button = document.createElement("button");
button.innerText = "Click here";
button.type = "submit";
button.name = "button";
button.classList.add("button");
document.body.appendChild(button);
Here's the resulting HTML:
<body>
<button type="submit" name="button" class="button">Click here</button>
</body>
Event Listeners
After you've created your button, you'll want to add an event listener to it so that you can execute some code when the button is clicked.
Let's add an event listener to our button and listen for the click
event.
const button = document.createElement("button");
button.innerText = "Click here";
button.type = "submit";
button.name = "button";
button.classList.add("button");
button.addEventListener("click", () => {
alert("You clicked the button!");
});
document.body.appendChild(button);
Now, once you click on this button, you'll get an alert
saying You clicked the button!
.
Conclusion
Sometimes, you'll want to create an HTML button programmatically. In this post, we saw how to create an HTML button using JavaScript, and how to alter the text of the button, type, name and class attributes.
We also learned how to add an event listener to our button and listen for the click
event.
Hopefully you've found this post useful!
If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on X! You can also join the conversation over at our official Discord!
Leave us a message!