Skip to content
Related Articles

Related Articles

HTML | DOM button Object
  • Last Updated : 11 Jan, 2019

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>                    

Output:
Before click on the button:
buttonobj
After click on the button:
buttonobj

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>                    

Output:
Before click on the button:
buttonobj
After click on the button:
buttonobj




My Personal Notes arrow_drop_up
Recommended Articles
Page :