Updated March 27, 2023
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 the 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 specified elements’ new content.
- 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 of implementing 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 a .html extension and run it in the web browser. It will display the screen, as shown below:
- Click on the button shown in the result. When you click on the button, it will give the below result:
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:
- After clicking the button, the code will display the alert box as shown in the below image:
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:
- When clicking on the button, it will show the below result:
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 the first-line, and it will get the display in the second line:
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:
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:
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:
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:
Conclusion
So far, we have studied about html () method in jQuery. While using the HTML (,) method to determine an element’s content, 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 –
