jQuery replace text; Through this tutorial, i am going to show you how to change or replace text in div, paragraph, button, span, etc. using jQuery html().
jQuery Replace Text
The jQuery html () method is used to change the entire contents of the selected elements.
Syntax jQuery html () method
$(selector).html()
html() method returns the content of first matched element.
$(selector).html(content)
Html() method sets the content of matched element.
$(selector).html(function (index, currentcontent))
It sets the content using function.
The HTML () method is used either to set content or to return the contents of the selected elements.
- To set the content :- When you use this method to set the content, it overwrites the contents of all matched elements.
- To return the content :- When you use this method to return content, it first returns the content of the matched element.
Parameters of jQuery html () method
Parameter | Description |
---|---|
Content | It is an essential parameter. It is used to specify the new content for the selected elements. It can also contain HTML tags. |
Function (index, currentcontent) | It is an optional parameter. It specifies a function that returns the new content for the selected elements.Index: It shows the index position of the element in the set.Currentcontent: It shows the current HTML content of the selected element. |
Example 1 – jQuery replace/change text in paragraph by id
See the following example for replace text in paragraph by id using jquery html() method; as shown below:
<!DOCTYPE html> <html> <title>Learn Jquery Html Method</title> <head> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> $(document).ready(function(){ $("#btn_click").click(function(){ $("#para").html("Hello <b>there, Thanks to try it</b>"); }); }); </script> </head> <body> <button id="btn_click">Click here to change the content</button> <p id="para">This is a paragraph. When you click the button after that it will change.</p> </body> </html>
Example – jQuery replace text in h2 by id
See the following example for replace text in h2 by id using jquery html(); as shown below:
<!DOCTYPE html> <html> <head> <title> jQuery replace text using html() </title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body style = "text-align:center;"> <h1 style = "color:blue;" >Hello World </h1> <h2>jQuery | html() Method </h2> <button id="btn-click">Click</button> <script> $(document).ready(function(){ $("#btn-click").click(function(){ $("h2").html('Hello'); }); }); </script> </body> </html>
Recommended jQuery Tutorial
Recommended:-jQuery Get Set and Delete Div Background Image
Recommended:-jQuery Get Current Page URL, Path, Host and hash
Recommended:-jQuery Remove Duplicate Objects from Array
Recommended:-jQuery Convert Image into base64 String
Recommended:-jQuery Range UI Slider With Tooltip, Labels
Recommended:-jQuery Reload or Refresh Page Automatically
Recommended:-jQuery Remove Elements From array and Object
Recommended:-jQuery Remove All Space From String
Recommended:-jQuery Ajax Form Submit FormData Example
Recommended:-jQuery Get and Set Image Src Example
Recommended:-JavaScript / jQuery Calling Rest Api Example
Recommended:-jQuery Remove Whitespace From String
Recommended:-jQuery Multiple Image Upload With Preview and Delete
Recommended:-jQuery Ajax Loading Spinner
Recommended:-jQuery Multi Step Form with Validation