HTML | DOM button Object
The button object in HTML is used to represent a <button> element. The getElementById() method is used to get the button object.
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:
<!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> |
chevron_right
filter_none
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:
<!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> |
chevron_right
filter_none
Output:
Before click on the button:
After click on the button:
Recommended Posts:
- HTML | DOM Input Button Object
- HTML | button Tag
- HTML <button> value Attribute
- HTML | DOM Button value Property
- HTML | <button> name Attribute
- HTML | DOM Button name Property
- HTML <button> disabled Attribute
- How to create directory with HTML button and PHP ?
- HTML | DOM Button autofocus Property
- HTML | <button> type Attribute
- HTML | <button> form Attribute
- HTML | DOM Button disabled Property
- HTML | DOM Input Button name Property
- HTML | DOM Input Button value Property
- HTML | <button> autofocus Attribute
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
