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

Small things always make you to think big

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.