Create an HTML button using JavaScript
Table of Contents
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:
JAVASCRIPTconst 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:
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:
JAVASCRIPTconst 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:
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.
JAVASCRIPTconst 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!
- Getting Started with TypeScript
- How to Install Node on Windows, macOS and Linux
- How to Set Up Cron Jobs in Linux
- Best Visual Studio Code Extensions for 2022
- How to deploy a MySQL Server using Docker
- How to deploy an Express app using Docker
- Learn how to use v-model with a custom Vue component
- Getting User Location using JavaScript's Geolocation API
- Building a Real-Time Note-Taking App with Vue and Firebase
- Setting Up Stylus CSS Preprocessor
- Getting Started with Vuex: Managing State in Vue
- Using Axios to Pull Data from a REST API