How To Change Button Text In jQuery
Last Updated : Jul 1, 2023
IN - jQuery | Written & Updated By - Ashish
In this article we will show you the solution of how to change button text in jQuery, here we are going to show you example to achieving result with the help of text() and click() method.
Generally text() or html() methods used to append defined text on selected element then click() method defined for specified source code will start load on browser when clickable element clicked by user.
Otherwise on browser you can’t see the result because it waits for click event occur.
Step By Step Guide On How To Change Button Text In jQuery :-
Here we defined html block with button ‘New’ which is help you to load major part of code then displays result on browser.
In script block we defined ready() method which is automatically loads program when open browser within that click() function defined to load main process after user clicks ‘New’ button.
To specify button you have to write element name then using text() method we changed button name to ‘BUTTON’.
<!DOCTYPE html>
<html>
<head>
<title>Change Button Text</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("button").text("BUTTON");
});
})
</script>
</head>
<body>
<button>New</button>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Here we imported open source jquery library support file which is needed for coding using jquery in program.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- In script we defined ready() function then click() method defined with button by specifying element name where we need to append text() method with text ‘BUTTON’. Which is result text on button element text ‘New’ changed to ‘BUTTON’.
- In html block we defined button ‘New’ where we not defined any attributes incase you wants specify button element with the help of ‘class or id’ attribute you can modify it accordingly, result won’t get affect.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to change button text in jquery.
Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes in document without any error.
When we executes this program on browser we can see button ‘New’ now user needs to click on it then we can see changes on button text to ‘BUTTON’ on webpage.
I hope this article on how to change button text in jQuery helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
