The jQuery html() method can be used to return or set the HTML content for the selected element. You can add or get HTML tags and their content using this method.
Syntax
The syntax of this method is given below:-
Description of the Parameters
The description of these parameters is given below.
| Parameter Name | Description |
|---|---|
| selector | It is the element to select and set or return the HTML content. You can use tag name, class name, or id of the elements to select. It is a required field. |
| content | Specify the HTML content to set or return for the selected elements. It is a required field. The element can contain HTML tags to add to the selected element. |
| index | Returns the index position of the element. |
| current_content | It returns the current HTML content of the selected element. |
jQuery html() Method to HTML Content
If you want to return or get the HTML content of the selected element, you have to use the method as given below. It requires no parameter to specify and return the HTML content.
Example
|
1 2 3 4 5 6 7 8 9 10 |
<script> $(document).ready(function(){ $('.gethtmlbtn').click(function(){ var myhtml = $("p").html(); alert(myhtml); }); }); </script> <p>This is my paragraph. <b>Welcome to TutorialDeep!</b>.</p><br> <button type="button" class="gethtmlbtn">Click to Get HTML</button> |
Output
This is my paragraph. Welcome to TutorialDeep!.
When you click the button given above, it returns the HTML content and displays it on the alert box. The alert displays the content including the HTML tags and its content.
Set HTML Content Using jQuery html() Method
If you want to set the HTML content of the selected element, you have to use the method as given below. To set the HTML content, you have to specify the HTML content including tags.
Example
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $('.sethtmlbtn').click(function(){ $("p").html("Hello and <b>Welcome to TutorialDeep</b>."); }); }); </script> <p>This is my paragraph.</p><br> <button type="button" class="sethtmlbtn">Click to Set HTML</button> |
Output
This is my paragraph.
You have to click the button given above to set the specified HTML content. It replaces the content of the selected element with the specified HTML content including tags.
Use Function to Set the HTML Content
The method can also be used with the function to set the HTML content for the specified element. You have to use the example as given below to set the HTML content.
Example
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $('.sethtmlfnbtn').click(function(){ $("p").html("Use html() method to <em>return or set HTML content</em>."); }); }); </script> <p>This is my paragraph.</p><br> <button type="button" class="sethtmlfnbtn">Click to Set HTML Using Function</button> |
Output
This is my paragraph.
Click the button given above to set the HTML content using the function. The method replaces the selected content with the specified HTML content inside the function.
You may also like to read
I hope you like this tutorial on jQuery html() method. If you have any queries regarding the tutorial, please comment below.
References