Introduction to jQuery html()

The html() method can be used to provide the content of any element in an HTML document. If the match expression meets more than one element, its HTML content is returned only to the first match. This jQuery html method takes advantage of the innerHTML property of the browser. Several browsers might not return HTML which simulates the exact source of HTML in an actual document.

Some jQuery constructor or method which acknowledges an HTML string can effectively execute script through code. It can happen by inserting script identifiers or using code implementing HTML attributes. Don’t use such mechanisms to inject strings collected from untrusted sources such as parameters for the URL query, cookies or inputs for the form. By doing so, this can incorporate vulnerabilities by cross-site scripting (XSS). Delete or escape input from any user prior to adding content to document

Syntax

1. It generates first matched item content s shown below:

$(selector).html()

2. It provides matched element content as shown below:

$(selector).html(content)

3. The content is set using a function as shown below:

$(selector).html(function(index, currentcontent))

Parameters in jQuery html()

This method takes two parameters, as mentioned above:

1. Content: This is the mandatory element that defines the new content for the chosen elements.

2. Function(index, currentcontent): This is an optional parameter that defines a function that returns the new content of the specified elements.

Index: The index position of the element inside the set is returned. currentcontent: The current HTML content of the selected element is returned. Working of jQuery html()

The html() method works with the above three parameters based on the criteria. The method html () selects or returns the content or innerHTML of the elements chosen. While using this method to return content it provides the first matched element content. Whenever this process is used for setting content, the content of all matched elements is overwritten.

Examples to Implement jQuery html()

Below is the example to implement in jQuery html() methods:

Example #1

Code:

<!DOCTYPE html> <html> <head> <title> jQuery html() Method </title> <script src= “https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”> </script> </head> <body style = “text-align:center;”> <h2 style = “color:green;” > html () example </h2> <button>Click here..</button> <script> $(document).ready(function(){ $(“button”).click(function(){ $(“h2”).html(“Hello… <b>Welcome to EDUCBA…!</b>”); }); }); </script> </body> </html>

Output:

Save the above file with .html extension and run it in the web browser. It will display the screen as shown below:

html extension

Click on the button shown in the result. When you click on the button, it will give the below result:

 click

Example #2

Code:

<!DOCTYPE html> <html> <head> <title> jQuery html() Method </title> <script src= “https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”> </script> </head> <body style = “text-align:center;”> <h3 style = “color:grey;” > html () example </h3> <button>Click here…</button> <script> $(document).ready(function(){ $(“button”).click(function(){ alert($(“h3”).html()); }); }); </script> </body> </html>

Output:

Before clicking the button, the above code will display the below result:

jQuery html() 3

After clicking the button, the code will display the alert box as shown in the below image:

this site

Example #3

Code:

<!DOCTYPE html> <html> <head> <title> jQuery html() Method </title> <script src= “https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”> </script> </head> <body style = “text-align:center;”> <h3 style = “color:grey;” > html () example </h3> <button class=”btn”>Click here…</button> <script> $(document).ready(function() { $(“.btn”).click(function() { $(“h3”).html(function(n) { return “The jQuery html() method” + ” has index: ” + n; }); }); }); </script> </body> </html>

Output:

The below image shows the result before clicking the button:

jQuery html() 5

When clicking on the button, it will show the below result:

index 0

Example  #4

Code:

<html> <head> <title>jQuery html() Method</title> <script type = “text/javascript” src = “https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”> </script> <script type = “text/javascript” language=”javascript”> $(document).ready(function() { var content = $(“p”).html(); $(“#txt”).html( content ); }); </script> <style> .color2 { color:blue; } .color1 { color:cyan; } </style> </head> <body> <h3 style = “color:grey;” > html () example </h3> <p class = “color1” id = “txt1”>First data…</p> <p class = “color2” id = “txt”>Second data….</p> </body> </html>

Output:

When you run the above example, you would get the content of first-line and it will get the display in the second line:

first data

Example #5

Code:

<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf-8″> <title>jQuery html() Method </title> <style> .txt { margin: 10px; font-size: 15px; color: red; cursor: pointer; } .txt1 { text-decoration: underline; } </style> <script src=”https://code.jquery.com/jquery-1.10.2.js”></script> </head> <body> <span class=”txt”> <span class=”txt1″>Click on this here to change the <span id=”mytag”>html</span> to text… </span> <script> $( “.txt” ).click(function() { var htmlString = $( this ).html(); $( this ).text( htmlString ); }); </script> </body> </html>

Output:

jQuery html() 8

Example #6

Code:

<!doctype html> <html lang=”en”> <head> <meta charset=”utf-8″> <title>jQuery html() Method</title> <script src=”https://code.jquery.com/jquery-3.4.1.js”></script> <style> .txt { color: #C0732D; } </style> </head> <body> <span>Hello World …</span> <div></div> <div></div> <div></div> <script> $( “div” ).html( “<span class=’txt’>Welcome to <b> EDUCBA … </b></span>” ); </script> </body> </html>

Output:

jQuery html() 9

Example #7

Code:

<!doctype html> <html lang=”en”> <head> <meta charset=”utf-8″> <title> jQuery html() Method </title> <style> div { color: #C0732D; font-size: 15px; } </style> <script type = “text/javascript” src = “https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”> </script> </head> <body> <div></div> <div></div> <div></div> <script> $( “div” ).html( “<b>Hello world … !!!!</b> Welcome to <b> EDUCBA …” ); $( “div b” ) .append( document.createTextNode( “!!!” ) ) .css( “color”, “green” ); </script> </body> </html>

Output:

jQuery html() 10

Example #8

Code:

<html> <head> <title> jQuery html() Method </title> <script type = “text/javascript” src = “https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”> </script> <script type = “text/javascript” language = “javascript”> $(document).ready(function() { $(“div”).click(function () { var content = $(this).html(); $(“.txt”).html(content); }); }); </script> <style> .div { margin:14px; padding:15px; border:1px solid #666; width:100px; } </style> </head> <body> <p>Click on the given boxes to see the respective box number:</p> <p class = “txt”> This is simple text … </p> <div class = “div” style = “background-color:#004f9e;”> <h2> This is first box … </h2> </div> <div class = “div” style = “background-color:#3f5f56;”> <h2> This is second box … </h2> </div> <div class = “div” style = “background-color:#00805e;”> <h2> This is third box … </h2> </div> </body> </html>

Output:

jQuery html() 11

Conclusion

So far, we have studied about html () method in the jQuery. While using the html () method to determine the content of an element, any content stored in that element will be entirely replaced by new content. Moreover, jQuery eliminates other constructs from child elements including data and event handlers before exchanging such elements with the new content. This method basically uses the innerHTML property of JavaScript. The internalHTML property sets and gets the matched element of the HTML content.

 Recommended Articles

This is a guide to jQuery html(). Here we discuss Syntax, methods, parameters, and examples to implement jQuery html() with proper codes and outputs. You can also go through our other related articles to learn more –

jQuery insertAfter() 2. jQuery unload() jQuery Slidetoggle() jQuery Outerwidth()

The post jQuery html() appeared first on EDUCBA.

Read more: educba.com

Leave a Reply

Your email address will not be published. Required fields are marked *