Here is the question to Change the Text of a Button using jQuery. To do this task, we can use the following two methods:
- prop() method: It is used to set property values, it sets one or more property for the selected elements.
Syntax:
$(selector).prop(para1, para2)
Approach:
- Get the text from the <input> element.
- FIRST matched element is taken on the basis of para1.
- Change the value set for the selected element from para1 to para2.
Example:
<!DOCTYPE html>
<html>
<head>
<title>
Change the Text of a Button using jQuery
</title>
<script src=
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h3>Change the Text of a Button using jQuery</h3>
<p>
Click on button to change text
from "Click" to "Prop Click"
</p>
<input type="button" id="Geeks" value="Click">
<script>
$(document).ready(function() {
$("input").click(function() {
// Change text of input button
$("#Geeks").prop("value", "Prop Click");
});
});
</script>
</body>
</html>
|
Output:
Before Click on button:
After Click on button:
- The html() method: It set or return the content (innerHTML) of the selected elements.
Syntax:
$(selector).html(content)
Approach:
- Get the text from the <button> element.
- It matches the selector element.
- Change the value set for the selected element to content.
Example:
<!DOCTYPE html>
<html>
<head>
<title>How to Change the Text of a
Button using jQuery?</title>
<script src=
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h3>How to Change the Text of a Button using jQuery?</h3>
<p>Click on button to change text
from "Click" to "Html Click"</p>
<button type="button" id="Geeks">Click</button>
<script>
$(document).ready(function() {
$("button").click(function() {
// Change text of button element
$("#Geeks").html("Html Click");
});
});
</script>
</body>
</html>
|
Output:
Before Click on button:
After Click on button:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
06 Sep, 2019
Like Article
Save Article