How to change the text of a button in jQuery?

Depends on what type of button you are using

<input type='button' value='Add' id='btnAddProfile'>$("#btnAddProfile").attr('value', 'Save'); //versions older than 1.6<input type='button' value='Add' id='btnAddProfile'>$("#btnAddProfile").prop('value', 'Save'); //versions newer than 1.6<!-- Different button types--><button id='btnAddProfile' type='button'>Add</button>$("#btnAddProfile").html('Save');

Your button could also be a link. You'll need to post some HTML for a more specific answer.

EDIT : These will work assuming you've wrapped it in a .click() call, of course

EDIT 2 : Newer jQuery versions (from > 1.6) use .prop rather than .attr

EDIT 3 : If you're using jQuery UI, you need to use DaveUK's method (below) of adjusting the text property

For buttons created with .Button() in jQuery........

Whilst the other answers will change the text they will mess up the styling of the button, it turns out that when a jQuery button is rendered the text of the button is nested within a span e.g.

<button id="thebutton">  <span class="ui-button-text">My Text</span></button>

If you remove the span and replace it with text (as in the other examples) - you'll loose the span and associated formatting.

So you actually need to change the text within the SPAN tag and NOT the BUTTON!

$("#thebutton span").text("My NEW Text");

or (if like me it's being done on a click event)

$("span", this).text("My NEW Text");

The correct way of changing the button text if it was "buttonized" using JQuery is to use .button() method:

$( ".selector" ).button( "option", "label", "new text" );