What is the use of html() method in jQuery ?
Last Updated :
23 Jul, 2025
The html() method in jQuery is used to get the contents of the first element in the set of matched elements or is used to set the HTML contents of every matched element. It returns the content of the first matched element. This function does not accept any arguments.
Syntax:
$(selector).html();
Approach: We will create a button with id & set its value as get. Then we write the jQuery script as alerting a simple message which returns the HTML contents of the first matched element once the user clicks the "Get" button.
Example: In this example, we are getting the contents of the <div> tag once the user clicks the button that will be displayed using the alert method.
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=
"https://code.jquery.com/jquery-1.12.0.min.js">
</script>
<script>
$(document).ready(function () {
$("button").click(function () {
alert($("div").html());
});
});
</script>
</head>
<body>
<div>
<p>Get html content from html element</p>
</div>
<button id="get">Get</button>
</body>
</html>
Output:
Converting the HTML element to a text:
Approach: We are creating a button with the value Get. Then we write the jQuery script that converts the contents of the HTML (which is the firstDiv element) into a string and displaying it in the paragraph element. We get the complete HTML contents of the first Div element in this example.
Example: In this example, we are getting the content of the div element. We have two div tags and only the contents of the first matched element will be returned.
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=
"https://code.jquery.com/jquery-1.12.0.min.js">
</script>
<script>
$(document).ready(function () {
$("button").click(function () {
var str = $("div.firstDiv").html();
$("p").text(str);
});
});
</script>
</head>
<body>
<div class="firstDiv">
<div class="secondDiv">
<p>Get html content from html element</p>
</div>
</div>
<button id="get">Get</button>
</body>
</html>
Output:
Setting the contents of HTML:
Syntax:
It sets the content of the matched element.
$(selector).html(content)
It sets the content using a function.
$(selector).html(function(index, currentcontent))
Parameters: This method accepts two parameters as mentioned above and described below:
- content: It is a mandatory parameter that specifies the new content for the selected elements.
- function(index, currentcontent): It is an optional parameter that specifies a function that returns the new content for the selected element.
- index: It is used to return the index position of the element in the set.
- currentcontent: It is used to return the current HTML content of the selected element.
Approach: We are creating a button with the Value Set. Then we write the jQuery script that sets the contents of the first matched element i.e. the first Div element. The complete code of fisrtDiv i.e. a first Div element will be changed to "New HTML Content and GeeksforGeeks". Note that we are using the <h1> and <h2> tags in the updated content of the HTML.
Example: In this example, we are setting the content of the div element once the user clicks the button Set using the first syntax.
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=
"https://code.jquery.com/jquery-1.12.0.min.js">
</script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("div").html(
"<h1>New HTML Content</h1> <h2>GeeksforGeeks</h2>");
});
});
</script>
</head>
<body>
<div class="firstDiv">
<div class="secondDiv">
<p>Set new html content by adding a button</p>
</div>
</div>
<button>Set</button>
</body>
</html>
Output:
Approach: We are creating a button with the Value Set. Then we write the jQuery script which sets the contents of the first matched element i.e., the first Div element using a function. The complete code of fisrtDiv i.e., a first Div element will be changed to "Old content is: Set new HTML content by adding a button with index 0 is now changed". The function has two arguments i.e., index value and the old content as a string. We are using these values and updating the old content as you can see in the output.
Example: In this example, we are setting the contents of the first Div element once the user clicks on the button Set. We are simply returning a message and also printing the index value received.
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=
"https://code.jquery.com/jquery-1.12.0.min.js">
</script>
<style>
.firstDiv {
width: 400px;
border-color: blue;
border-width: 0.2em;
border-style: double;
}
</style>
<script>
$(document).ready(function () {
$("button").click(function () {
$("div").html(function (i, str) {
return (
"<h2>Old content is:</h2>" +
str +
"<h2>with index</h2>" +
i +
"<h2>is now changed</h2>"
);
});
});
});
</script>
</head>
<body>
<div class="firstDiv">
<div class="secondDiv">
<h2>
Set new html content
by adding a button
</h2>
</div>
</div>
<br />
<button>Set</button>
</body>
</html>
Output:
Similar Reads
jQuery Tutorial jQuery is a lightweight JavaScript library that simplifies the HTML DOM manipulating, event handling, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery achieves this by providing concise, single-line methods for complex JavaSc
8 min read
Getting Started with jQuery jQuery is a fast lightweight, and feature-rich JavaScript library that simplifies many common tasks in web development. It was created by John Resign and first released in 2006. It makes it easier to manipulate HTML documents, handle events, create animations, and interact with DOM(Document Object M
4 min read
jQuery Introduction jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM). jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser Java
7 min read
jQuery Syntax The jQuery syntax is essential for leveraging its full potential in your web projects. It is used to select elements in HTML and perform actions on those elements.jQuery Syntax$(selector).action()Where - $ - It the the shorthand for jQuery function.(selector) - It defines the HTML element that you w
2 min read
jQuery CDN A Content Delivery Network (CDN) is a system of distributed servers that deliver web content to users based on their geographic location. Including the jQuery CDN in your project can improve the performance, enhance reliability, and simplify maintenance.What is a jQuery CDN?A jQuery CDN is a service
4 min read
jQuery Selectors
JQuery SelectorsWhat is a jQuery Selector?jQuery selectors are functions that allow you to target and select HTML elements in the DOM based on element names, IDs, classes, attributes, and more, facilitating manipulation and interaction. Syntax: $(" ")Note: jQuery selector starts with the dollar sign $, and you encl
5 min read
jQuery * SelectorThe jQuery * selector selects all the elements in the document, including HTML, body, and head. If the * selector is used together with another element then it selects all child elements within the element used. Syntax: $("*")Parameters: *: This parameter is used to select all elements.Example 1: Se
1 min read
jQuery #id SelectorjQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Aja
1 min read
jQuery .class SelectorThe jQuery .class selector specifies the class for an element to be selected. It should not begin with a number. It gives styling to several HTML elements. Syntax: $(".class") Parameter: class: This parameter is required to specify the class of the elements to be selected.Example 1: In this example,
1 min read
jQuery Events
jQuery Effects
jQuery HTML/CSS
jQuery Traversing