BeginnersBook

  • Home
  • Java
    • Java OOPs
    • Java Collections
    • Java Examples
  • C
    • C Examples
  • C++
    • C++ Examples
  • DBMS
  • Computer Network
  • Python
    • Python Examples
  • More…
    • jQuery
    • Kotlin
    • WordPress
    • SEO
    • JSON
    • JSP
    • JSTL
    • Servlet
    • MongoDB
    • XML
    • Perl

jQuery html() method

Last Updated: July 11, 2022 by Chaitanya Singh | Filed Under: jQuery

jQuery html() method is used to set or return the content of the selected elements.

When html() method is used to set the content of the selected elements, it overwrites the content of all the matched selected elements. For example, the code $("p").html("BeginnersBook"); will change the content of all the paragraphs to “BeginnersBook”.

When html() method is used to return the content of the selected elements, it returns the content of the first matched element and ignores the rest. For example, if there are multiple paragraphs on a page then the code $("p").html() would return the content of first paragraph only.

jQuery html() Syntax

To return the content:

$(selector).html()

To set the content:

$(selector).html(content)

jQuery html() Example to set element content

In the following example, on the button click event we are changing the content of all the paragraphs using html() method. See the screenshots in the output.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").html("Hi <b>Friends</b>");
  });
});
</script>
</head>
<body>

<h2>jQuery html() example on Beginnersbook.com</h2>
<p>Welcome to Beginnersbook.com</p>
<p>This is my second paragraph</p>
<button>Set Content</button>
</body>
</html>

Output:
Before the button is clicked:
This screenshot is taken when the page is initially loaded and we have not yet clicked the button.
jQuery html set content
After the button is clicked:
This screenshot is taken after we have clicked the button. As you can see, the content of all the paragraphs is changed.
jQuery html set content example

jQuery html() Example to return element content

In the following example we are using html() method to get the content of selected element. When we get the content using html() method, it returns the content of only first matched element. This is the reason, in the following example, only the content of first paragraph is displayed in the alert message.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("p").html());
  });
});
</script>
</head>
<body>

<h2>jQuery html() example on Beginnersbook.com</h2>
<p>Welcome to <b>Beginnersbook.com</b></p>
<p>This is my <b>second</b> paragraph</p>
<button>Get Content</button>
</body>
</html>

Output:
Before the button is clicked:
This screenshot is taken when the page is initially loaded and we have not yet clicked the button.
jQuery html() method get content
After the button is clicked:
This screenshot is taken after we have clicked the button. As you can see, the content of the first paragraph is displayed in the alert message.
jQuery html() method get content example

❮ jQuery ChainingjQuery addClass() ❯

Top Related Articles:

  1. jQuery scroll() Method
  2. jQuery removeClass() Method
  3. jQuery slideToggle()
  4. jQuery val()
  5. jQuery after() Method

About the Author

I have 15 years of experience in the IT industry, working with renowned multinational corporations. Additionally, I have dedicated over a decade to teaching, allowing me to refine my skills in delivering information in a simple and easily understandable manner.

– Chaitanya

Leave a Reply Cancel reply

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

jQuery Tutorial

  • jQuery Tutorial
  • jQuery Selectors
  • jQuery Events

jQuery Effects

  • jQuery Show & Hide
  • jQuery Fading
  • jQuery Sliding
  • jQuery Animate
  • jQuery stop()
  • jQuery Callback Function
  • jQuery Chaining

jQuery HTML/CSS

  • jQuery html()
  • jQuery addClass()
  • jQuery hasClass()
  • jQuery removeClass()
  • jQuery toggleClass()
  • jQuery after()
  • jQuery before()
  • jQuery append()
  • jQuery appendTo()
  • jQuery clone()
  • jQuery insertBefore()
  • jQuery insertAfter()
  • jQuery attr()
  • jQuery text()
  • jQuery val()
  • jQuery css()
  • jQuery prepend()
  • jQuery remove()
  • jQuery empty()
  • jQuery detach()

Copyright © 2012 – 2025 BeginnersBook . Privacy Policy . Sitemap