How to change the text of a button in jQuery
In this tutorial, we are going to see how to change the text of a button in jQuery. You can use jQuery’s prop() method to edit the text of buttons built with the <input> tag, while you can use the html() method to edit the text of buttons built with the <button> tag.
The jQuery code in the example below will modify the button text when the document is ready:
How to change the text of a button in jQuery
<!DOCTYPE html> <html> <head> <title>Change the text of a button in jQuery</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> $(document).ready(function(){ // Change text of buttons built with the <button> tag $("#btn").html("New Text"); // Change text of buttons built with the <input> tag $("#inpt").prop("value", "New Text"); }); </script> </head> <body> <button type="button" id="btn">Old Text</button> <input type="button" id="inpt" value="Old Text"> </body> </html>
Result |
---|