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

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:

$("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.