Change Button Text using JQuery

In this tutorial we will see how to Change Button Text using JQuery. JQuery .html() method is used for this, which will update the text of button.

Table of Contents

HTML Code

HTML Code is given below.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Change Button Text using JQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <button id="button">Change Text</button>
</body>
</html>

JQuery Code

JQuery Code is given below. JQuery html() method sets or returns the inner content of the selected html element.

In this code whenever the click event occurs, a function is executed which changes the text of html button with help of html() method.

<script>
$("#button").click(function(){
$(this).html("New Text");
})
</script>

Demo

Check Demo

Video Tutorial

Watch video tutorial on how to Change Button Text using JQuery.