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>                     

Output:
Before click on the button:
buttonobj
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>                     

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

My Personal Notes

Recommended Posts: