How to change the text of a Bootstrap 3 button with jQuery?

Question

How to retrieve button text inside tag button?

Example HTML:

<button type="button" class="btn btn-danger" id="dislikes" value="notThisValue">DISLIKES<span class="glyphicon glyphicon-thumbs-down"></span></button>

My jQuery:

$(document).ready(function(){
    $('#dislikes').click(function() {
        $("#dislikes").val('Hello World');
    })
});

I need to change the text DISLIKES to YOU DISLIKE IT. My jQuery has to change the inner text of the button not the value "notThisValue".

Answer 1

The reason you are not able to change the text is that you are changing its value using .val(). Instead you need to use .text() to change tag's text.

Try this.

$(document).ready(function(){
$('#like').click(function() {
 $("#like").text('YOU DISLIKE IT');
})
});

Answer 2

Use .text() or .html():

$(document).ready(function() {
    $('#dislikes').click(function() {
        $(this).text('Hello World');
    })
});