Home»Blog»Create an HTML button using JavaScript

Create an HTML button using JavaScript

Updated onFeb 06, 2022byAlan Morel

#javascript

The Basics
Going Further
Event Listeners
Conclusion

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:

JAVASCRIPT
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:

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:

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:

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.

JAVASCRIPT
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!

To learn more about web development, founding a start-up, and bootstrapping a SaaS, follow me on X!