How to Change the Text of a Button using jQuery?

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

  1. 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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
          Change the Text of a Button using jQuery
      </title>
        <script src=
      </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>

    chevron_right

    
    

    Output:
    Before Click on button:

    After Click on button:

  2. 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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>How to Change the Text of a 
          Button using jQuery?</title>
        <script src=
      </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>

    chevron_right

    
    

    Output:
    Before Click on button:

    After Click on button:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

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.