Code has been added to clipboard!

What Is jQuery innerHTML and How Is It Related to .html() Method

Reading time 1 min
Published Jan 19, 2018
Updated Oct 2, 2019

jQuery innerHTML: Main Tips

  • The jQuery .html() sets or returns the HTML content of the selected elements.
  • The standard JavaScript innerHTML property is similar to .html() method. Both return or set HTML content.
  • The .html() jQuery cannot be used on documents in XML format.

.html() Definition and Syntax

All HTML elements have inner HTML properties. The .html() jQuery method retrieves the HTML content of the first element in the particular set of matched elements.

Remember: jQuery innerHTML does not exist as a function. Use .html() jQuery to set or get HTML content.

In jQuery, innerHTML is retrieved with the following syntax of html:

$(selector).html();

If you need to make jQuery .html() overwrite HTML content, use this syntax:

$(selector).html(content);

In the example below, the text in the heading changes after you click a button:

Example
$("button").click(() => {
    $("h1").html("Hello <i>world</i>!");
});

Note: instead of an actual HTML string, you may add a function to return the content to add.

Latest Coupon Found:

Verified STAFF PICK

TOP-RATED CODING COURSES

Learn the skills of tomorrow

The best time to learn programming is now - follow this link to access 100+ coding courses and enjoy learning at a very low cost!

Expiration date: 15/05/2021
2287 People Used
Only 92 Left
Rating
5.0