HTML DOM Button object

HTMLWeb DevelopmentFront End Technology

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

Properties

Following are the properties for the HTML DOM button object −

PropertyDescription
autofocusTo set or return whether a button is automatically focused or not when the page loads.
disabledTo set or return whether a given button is disabled or not.
formTo return the reference of the form containing the button.
formActionTo set or return the formAction attribute value of a button.
formEnctypeTo set or return the formEnctype attribute value of a button.
formMethodTo set or return the formMethod attribute value of a button.
formNoValidateTo set or return whether the form data should be validated or not on submission.
formTargetTo set or return the formTarget attribute value of the button.
nameTo set or return the name attribute value of the button.
typeTo set or return the button type.
valueTo 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 −

On clicking CREATE −

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);
}
raja
Published on 07-Aug-2019 15:27:48
Advertisements