Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 −
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);
}
775 Views
