HTML DOM Button object

The HTML DOM Button object is associated with the <button> element.

Properties

Following are the properties for the HTML DOM button object −

Property	Description
autofocus	To set or return whether a button is automatically focused or not when the page loads.
disabled	To set or return whether a given button is disabled or not.
form	To return the reference of the form containing the button.
formAction	To set or return the formAction attribute value of a button.
formEnctype	To set or return the formEnctype attribute value of a button.
formMethod	To set or return the formMethod attribute value of a button.
formNoValidate	To set or return whether the form data should be validated or not on submission.
formTarget	To set or return the formTarget attribute value of the button.
name	To set or return the name attribute value of the button.
type	To set or return the button type.
value	To set or return the button value.

Syntax

Following is the syntax for −

Creating a button object −

var x = document.createElement("BUTTON");

Example

Let us see an example of the HTML DOM button object −

<!DOCTYPE html>
<html>
<body>
<p>Click on the below button to create a BUTTON element</p>
<button onclick="buttonCreate()">CREATE</button>
<br><br>
<script>
   function buttonCreate() {
      var x = document.createElement("BUTTON");
      var t = document.createTextNode("NEW BUTTON");
      x.appendChild(t);
      document.body.appendChild(x);
   }
</script>
</body>
</html>

Output

This will produce the following output −

HTML DOM Button object

On clicking CREATE −

HTML DOM Button object

In the above example −

We have first created a button element CREATE. This button will execute the buttonCreate() function on click.

<button onclick="buttonCreate()">CREATE</button>

The buttonCreate() method uses the createElement() method of the document object to create a button element and assigned it to the variable x. A text node is created using the create element and assigned to variable t. The text node t is then appended to the button using the appendchild method. The button along with its child text node is then appended as a child to the document body using the document.body.appendChild() method.

function buttonCreate() {
   var x = document.createElement("BUTTON");
   var t = document.createTextNode("NEW BUTTON");
   x.appendChild(t);
   document.body.appendChild(x);
}