WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
Advertisements

How to Change the Text of a Button using jQuery

Topic: JavaScript / jQueryPrev|Next

Answer: Use the jQuery prop() and html() Methods

You can use the jQuery prop() method to change the text of the buttons built using the <input> element, whereas you can use the html() method to change the text of buttons built using the <button> element.

The jQuery code in the following example will change the button text on document ready:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <title>jQuery Change Button Text</title>
  • <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  • <script>
  • $(document).ready(function(){
  •     // Change text of input button
  •     $("#myInput").prop("value", "Input New Text");
  •     
  •     // Change text of button element
  •     $("#myButton").html("Button New Text");
  • });
  • </script>
  • </head>
  • <body>
  •     <input type="button" id="myInput" value="Input Text">
  •     <button type="button" id="myButton">Button Text</button>
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

Advertisements

Your Feedback:

We would love to hear from you, please drop us a line.