How to Change the Text of a Button using jQuery?

Last Updated : 06 Sep, 2019

Here is the question to Change the Text of a Button using jQuery. To do this task, we can use the following two methods:

prop() method: It is used to set property values, it sets one or more property for the selected elements.

Syntax:

$(selector).prop(para1, para2)

Approach:

Get the text from the <input> element.
FIRST matched element is taken on the basis of para1.
Change the value set for the selected element from para1 to para2.

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
      Change the Text of a Button using jQuery 
  </title> 
    <script src= 
"https://code.jquery.com/jquery-1.12.4.min.js"> 
  </script> 
</head> 
  
<body style="text-align:center;"> 
    <h1 style="color:green;">  
        GeeksForGeeks  
    </h1> 
    <h3>Change the Text of a Button using jQuery</h3> 
    <p> 
      Click on button to change text 
      from "Click" to "Prop Click" 
  </p> 
    <input type="button" id="Geeks" value="Click"> 
    <script> 
        $(document).ready(function() { 
            $("input").click(function() { 
                // Change text of input button 
                $("#Geeks").prop("value", "Prop Click"); 
            }); 
        }); 
    </script> 
</body> 
  
</html> 

Output:
Before Click on button:

After Click on button:

The html() method: It set or return the content (innerHTML) of the selected elements.

Syntax:

$(selector).html(content)

Approach:

Get the text from the <button> element.
It matches the selector element.
Change the value set for the selected element to content.

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>How to Change the Text of a  
      Button using jQuery?</title> 
    <script src= 
            "https://code.jquery.com/jquery-1.12.4.min.js"> 
  </script> 
</head> 
  
<body style="text-align:center;"> 
    <h1 style="color:green;">  
        GeeksForGeeks  
    </h1> 
    <h3>How to Change the Text of a Button using jQuery?</h3> 
    <p>Click on button to change text  
      from "Click" to "Html Click"</p> 
    <button type="button" id="Geeks">Click</button> 
    <script> 
        $(document).ready(function() { 
            $("button").click(function() { 
                // Change text of button element 
                $("#Geeks").html("Html Click"); 
            }); 
        }); 
    </script> 
</body> 
  
</html> 