jQuery replace HTML content in elements(div, p, text, etc); Through this tutorial, i am going to show you how to replace HTML content in elements like div, paragraph, text etc using HTML() method.
jQuery Replace HTML Content in Element
The jQuery html() method is used to replace the entire contents of the selected html elements.
Syntax of 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 HTML Content in Element
See the following example to replace html content in elements 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 2 – jQuery Replace Text in HTML
See the example 2 for replace text in html using html() method; 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 Selected Dropdown Option Value onchange
Recommended:-jQuery Form Submit On Button Click
Recommended:-jQuery Keydown Event Example
Recommended:-jQuery Detect ENTER key pressed
Recommended:-jQuery keyup() Event Method
Recommended:-jQuery MouseEnter Event Method
Recommended:-jQuery Trigger Mouseleave on Element
Recommended:-jQuery Hover Event Trigger Example
Recommended:-jQuery Trigger Mousedown Event Method
Recommended:-jQuery Trigger Mouseup Event Method
Recommended:-jQuery Mouseover & MouseOut Event Method
Recommended:-jQuery Animation Effect Methods
Recommended:-jQuery FadeIn Animation Example
Recommended:-Fade Out Animation jQuery
Recommended:-jQuery FadeToggle Animation Example
Recommended:-jQuery FadeTo Animation Example
Recommended:-jQuery slideDown() Animation Example
Recommended:-jQuery SlideUp() Animation Example