How to create button in javascript?

AffiliatePal is reader-supported. When you buy through links on our site, we may earn an affiliate commission.



Creating buttons in JavaScript is a fundamental skill for web developers. Buttons provide interactivity and allow users to perform actions on a webpage. In this article, we will explore the process of creating buttons using JavaScript, including the necessary code and techniques.

Creating a Button Element

To create a button in JavaScript, we need to first create a button element in the HTML document. This can be done using the `createElement` method, specifying the element type as “button”. Here’s an example:

const button = document.createElement(“button”);

This code creates a new button element and assigns it to the `button` variable. However, at this point, the button is not yet visible on the webpage.

Setting Button Attributes and Content

Once we have created the button element, we can set its attributes and content. The most common attribute to set is the `innerText` property, which specifies the text displayed on the button. Here’s an example:

button.innerText = “Click me!”;

This code sets the button’s text to “Click me!”. Additionally, we can set other attributes such as `id`, `class`, or `style` to customize the button’s appearance and behavior.

Adding Event Listeners

To make the button interactive, we need to add an event listener that triggers a function when the button is clicked. We can use the `addEventListener` method to achieve this. Here’s an example:

button.addEventListener(“click”, function() {
// Code to be executed when the button is clicked

Inside the function, we can write the code that should be executed when the button is clicked. This could be anything from displaying a message to performing a complex operation.

Appending the Button to the Document

After creating the button element and defining its attributes and event listeners, we need to append it to the HTML document so that it becomes visible to the user. This can be done using the `appendChild` method. Here’s an example:


This code appends the button to the `` element of the document. You can also append the button to other elements by targeting them using their IDs or classes.


Creating buttons in JavaScript is a straightforward process. By following the steps outlined in this article, you can easily create interactive buttons that enhance the user experience on your webpages. Remember to set the button’s attributes and content, add event listeners, and append the button to the document to make it visible.