beginnersbook.com

  • Home
  • All Tutorials
    • Learn Servlet
    • Learn JSP
    • Learn JSTL
    • Learn C
    • Learn C++
    • Learn MongoDB
    • Learn XML
    • Learn Python
    • Learn Perl
    • Learn Kotlin
  • Core Java
  • OOPs
  • Collections
  • Java I/O
  • JSON
  • DBMS

jQuery html() method

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

❮ Previous

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()

Recently Added..

  • JSON Tutorial
  • Java Regular Expressions Tutorial
  • Java Enum Tutorial
  • Java Annotations Tutorial

Copyright © 2012 – 2021 BeginnersBook . Privacy Policy . Sitemap