Home » jQuery » jQuery Examples

How to change the text of a button in jQuery?

Let's see how to change the text of the HTML button using jQuery?
Submitted by Pratishtha Saxena, on November 22, 2022

Changing the button text using jQuery

In an HTML document, a button can be created in two basic ways – by using the <button> tag, or by using the <input> tag. A button can be generated using <input> tag by specifying the type of the input tag as button.

Since, there are two different ways to create a button in an HTML document, the text of the button is changed by different methods for each of them i.e.:-

By using prop() method for <input> tag
By using html() method for <button> tag

1) Using prop() Method

The prop() method in jQuery helps to set or return the property of the selected element. When the property has to be returned, then the name of the property (attribute) is defined and it will return the value of the matched property value of the element. When the property has to be set, then along with the property name, property value is also to be given.

Syntax:

$('selector').prop('propertyName');
$('selector').prop('propertyName','value');

This method sets the attribute of all the matched elements and returns the property value of the first matched element. We can also define a custom function as its event handler which will get fired once the prop() method is triggered.

Example 1: jQuery code to change the text of a button

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>Change the text of a button in jQuery</h2>
    <p>Click the button to set the new text.</p>
    <hr>
    <input type="button" value="Input Button">
    <hr>
    <h3></h3>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('input').click(function(){
            $(this).prop('value','Text Changed');
            $('h3').html('Input Button Text Changed')
        });
    });
  </script>
</html>

Output:

Example 1: Change the text of a button in jQuery

2) Using html() Method

The html() method is used to get or set the html content using jQuery. This is a very simple method through which we can return the html content of a particular element, also we can set some new content through this. As it returns the html content, hence by this we mean that it returns the text along with other present tags in that element.

Syntax:

$(selector).html();
$(selector).html(content);

By using only html(), we will be returned the html content of the selector. But when the content is specified within, then the selector's content is either created or replaced by the provided content.

Example 2: jQuery code to change the text of a button

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>

  <body>
    <h2>Change the text of a button in jQuery</h2>
    <p>Click the button to set the new text.</p>
    <hr>
    <button>Button</button>
    <hr>
    <h3></h3>
  </body>

  <script type="text/javascript">
    $(document).ready(function(){
        $('button').click(function(){
            $(this).html('Text Changed');
            $('h3').html('Button Tag Text Changed');
        });
    });
  </script>
</html>

Output: