HTML | DOM button Object

03 Mar, 2022
The button object in HTML is used to represent a <button> element. The getElementById() method is used to get the button object.Property Values:
autofocus: It sets or returns whether a  button should automatically get focus when the page loads or not.
defaultValue: It sets or returns the default value of the button.
disabled: It sets or returns whether the button is disabled or not.
form: It returns a reference to the form that contains the button.
formAction: It sets or returns the value of the formation attribute of the button.
formEnctype: It sets or returns the value of the formEnctype attribute of the button.
formMethod: It sets or returns the value of the formMethod attribute of the button.
formNoValidate: It sets or returns whether the  button, allows the form-data to be validated or not.
formTarget: It sets or returns the value of the formTarget attribute of the button.
name: It sets or returns the value of the name attribute of the submit button.
type: It returns the form element type of the button.
value: It sets or returns the value of the value attribute of the  button
Creating button object: The button object can be created using JavaScript. The document.createElement() method is used to create <button> element. After creating a button object use appendChild() method to append the particular element (such as div) to display it.Example 1:  
html
<!DOCTYPE html><html>    <head>        <title>            DOM Button Object        </title>                 <!-- script to create new button -->        <script>            function Geeks() {                var myDiv = document.getElementById("GFG");                                 // creating button element                var button = document.createElement('BUTTON');                                 // creating text to be                //displayed on button                var text = document.createTextNode("Button");                                 // appending text to button                button.appendChild(text);                                 // appending button to div                myDiv.appendChild(button); ;            }        </script>    </head>         <body style = "text-align: center;">             <h1 style = "color:green;">            GeeksforGeeks        </h1>                 <h2>            DOM Button Property        </h2>                   <p>Click the button to create a button.</p>                    <button onclick = "Geeks()">            Press me!        </button>                 <br><br>                 <div id = "GFG"></div>    </body></html>                   
Output: Before click on the button:  
After click on the button:  
Accessing button object: Access the button object by using the getElementById() method. Put the id of button element in the getElementById() to access it.Example 2:  
html
<!DOCTYPE html><html>    <head>        <title>            DOM Button Object        </title>                 <script>        function geek() {                         // Accessing the button element            // by using id attribute            var doc = document.getElementById("btn");                         // Changing the text content            doc.textContent = "Click me!";        }        </script>    </head>         <body style = "text-align: center;">             <h1 style = "color:green;">            GeeksforGeeks        </h1>                 <h2>            DOM Button Property        </h2>                   <p>            Click the button to change the            text inside it.        </p>                   <button type = "button" id = "btn"            onclick = "geek()">            Try it        </button>    </body></html>                   
Output: Before click on the button:  
After click on the button:  
Supported Browsers: 
Google Chrome
Internet Explorer
Firefox
Opera
Safari
ysachin2314
hritikbhatnagar2182
HTML-DOM
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?