How to Change the Text of a Button using jQuery?
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
=
"https://code.jquery.com/jquery-1.12.4.min.js"
>
</
script
>
</
head
>
<
body
style
=
"text-align:center;"
>
<
h1
style
=
"color:green;"
>
w3wiki
</
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
=
"Beginner"
value
=
"Click"
>
<
script
>
$(document).ready(function() {
$("input").click(function() {
// Change text of input button
$("#Beginner").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
=
"https://code.jquery.com/jquery-1.12.4.min.js"
>
</
script
>
</
head
>
<
body
style
=
"text-align:center;"
>
<
h1
style
=
"color:green;"
>
w3wiki
</
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
=
"Beginner"
>Click</
button
>
<
script
>
$(document).ready(function() {
$("button").click(function() {
// Change text of button element
$("#Beginner").html("Html Click");
});
});
</
script
>
</
body
>
</
html
>
Output:
Before Click on button:
After Click on button:
Contact Us