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

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 Twitter! You can also join the conversation over at our official Discord!