How to change the text of a button in jQuery

January 1, 2021 admin

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>