jQuery HTML Method

By: Rajesh P.S.

The jQuery html() method is a powerful tool that enables the manipulation of the HTML content of elements. It grants the ability to both retrieve and update the HTML content within selected elements. Here are examples illustrating the usage of the html() method:

Getting HTML Content

Consider an HTML structure with a <div> element:

<div id="myDiv"> <p>This is a paragraph.</p> <span>This is a span.</span> </div>

To retrieve the HTML content of the div using jQuery

var divHtml = $("#myDiv").html(); console.log(divHtml); // Output: // <p>This is a paragraph.</p> // <span>This is a span.</span>

Setting HTML Content

Continue Reading...

The html() method can also be used to update the HTML content of elements:

$("#myDiv").html("<p>New paragraph.</p><span>New span.</span>");

After executing this code, the content of the div will change to the newly provided HTML structure.

Working with Multiple Elements

Similar to other jQuery methods, the html() method operates on the first element in the selection. For example:

<div class="myClass">First div.</div> <div class="myClass">Second div.</div> var firstHtml = $(".myClass").html(); // Gets HTML of the first div $(".myClass").html("<p>Updated content.</p>"); // Sets HTML for both divs

In this scenario, both div elements will have their HTML content updated to the specified value.

Get and Set HTML Contents with html() Method

Get HTML Contents with html() Method

$("#btnIn").click(function(){ var str = $("#innerDiv").html(); alert(str); });

$("#btnOut").click(function(){ var str = $("#outerDiv").html(); alert(str); });

<div id="outerDiv"> Outer Div <div id = "innerDiv">Inner Div</div> </div>

Browser View

Outer Div

Inner Div

Full Source

<html> <head> <title>jQuery html() example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#btnIn").click(function(){ var str = $("#innerDiv").html(); alert(str); }); $("#btnOut").click(function(){ var str = $("#outerDiv").html(); alert(str); }); }); </script> </head> <body> <button id="btnIn">Get InnerDiv HTML</button> <button id="btnOut">Get OuterDiv HTML</button> <div id="outerDiv" style="border: 2px solid red;width:260px;"> Outer Div <div id = "innerDiv" style="border: 2px solid green; width:150px;">Inner Div</div> </div> </body> </html>

Set HTML Contents with html() Method

$("#btnSet").click(function(){ $("body").html("<Div>New Div!!!!</Div>"); });

Browser View

Outer Div

Inner Div

Full Source

<html> <head> <title>jQuery html() method example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $(".btnSet").click(function(){ $(".innerDiv").html("<div>New Div added!!!!</div>"); }); }); </script> </head> <body> <button class="btnSet">Set HTML</button> <div class="outerDiv"> Outer Div <div class = "innerDiv">Inner Div</div> </div> </body> </html>

Difference between jQuery: text() and html() ?

The text() method in jQuery retrieves or sets the plain text content within selected elements, treating HTML tags as literal characters. On the other hand, the html() method allows the retrieval or modification of the entire HTML content, including the tags, attributes, and nested elements of the selected elements. This makes text() suitable for handling plain text content, while html() is more versatile for managing complete HTML structures within elements. It's important to exercise caution with the html() method when dealing with user-generated content to avoid security vulnerabilities.

Conclusion

The html() method is a powerful tool for manipulating HTML content, but it's important to be cautious when working with user-generated or untrusted content to prevent security vulnerabilities like cross-site scripting (XSS).

Next > jQuery val() Method

Related Topics

More Related Topics.....