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!
How to Install Node on Windows, macOS and Linux
Getting Started with Svelte
Getting Started with Express
Create an RSS Reader in Node
Getting User Location using JavaScript's Geolocation API
Getting Started with Moment.js
Learn how to build a Slack Bot using Node.js
Creating a Twitter bot with Node.js
Setting Up Stylus CSS Preprocessor
Using Axios to Pull Data from a REST API
How To Create a Modal Popup Box with CSS and JavaScript
Getting Started with Moon.js