How to Change the Text of a Button using jQuery? - GeeksforGeeks

06 Sep, 2019
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;">         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=            "https://code.jquery.com/jquery-1.12.4.min.js">  </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:
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;">         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:
Syntax:
$(selector).prop(para1, para2)
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;">         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=            "https://code.jquery.com/jquery-1.12.4.min.js">  </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:
Syntax:
$(selector).html(content)
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;">         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:
jQuery-Misc
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Form validation using jQuery
How to Dynamically Add/Remove Table Rows using jQuery ?
Scroll to the top of the page using JavaScript/jQuery
How to get the ID of the clicked button using JavaScript / jQuery ?
jQuery | children() with Examples
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?