jQuery .html() Method

What You’ll Learn

The .html() method gets or sets the HTML contents of matched elements — a getter that returns innerHTML from the first match, and a setter that replaces all children. This tutorial covers both forms since 1.0, the callback setter since 1.4, comparisons with .text(), .append(), and .empty(), the official jQuery demos, and five practical try-it examples.

Introduction

Templates, widgets, and Ajax responses often need to swap entire blocks of markup inside a container — replace a loading spinner with results, read existing HTML before transforming it, or render a partial from the server. jQuery provides .html() for both reading and writing inner HTML.

Available since jQuery 1.0, .html() works in two modes. Called with no arguments, it returns the HTML string inside the first matched element. Called with an HTML string or callback, it replaces all child content inside every matched element. The method uses the browser’s innerHTML property under the hood.

Setting HTML runs through the browser parser — never pass untrusted user input directly. Use .text() for plain strings and .append() when adding without wiping existing children. Browse the jQuery DOM hub for related manipulation methods.

Understanding the .html() Method

Getter: .html() returns a string of the first matched element’s inner HTML. If nothing matches, it returns undefined.

Setter: .html( htmlString ) or .html( function ) replaces every child node inside each matched element. jQuery cleans up data and event handlers on removed children before inserting new markup. Returns the jQuery collection for chaining.

📝 Syntax

jQuery .html() supports three forms:

Get HTML contents — since 1.0

.html()

• Returns a string of the first matched element’s innerHTML.
• Not available on XML documents.

Set HTML contents — since 1.0

.html( htmlString )

• Replaces all children inside each matched element.
• htmlString — HTML markup parsed by the browser.

Set with callback — since 1.4

.html( function( index, oldhtml ) {
  // return new HTML string; `this` is the current element
} )

• Element is emptied before callback runs; use oldhtml for previous content.

Examples Gallery

Examples 1–5 follow the official jQuery API documentation and common production patterns. Use DevTools or the Try-it links to run each snippet in the browser.

$( "p" ).on( "click", function() {
  var htmlString = $( this ).html();
  $( this ).text( htmlString );
});

Click paragraph with <b> tags inside
.html() returns "<b>Click</b> to change..."
.text(htmlString) shows literal angle brackets on screen



Demonstrates getter reading innerHTML

$( "div" ).html( "<b>Hello Again</b>" );

Before: div contains "Hello"
After:  div contains <b>Hello Again</b>

All previous children replaced — not appended

$( "div.demo-container" ).html( function( index, oldhtml ) {
  var emphasis = "<em>" + $( "p" ).length + " paragraphs!</em>";
  return "<p>All new content for " + emphasis + "</p>";
});

Container emptied before callback runs
Returns new <p> with dynamic paragraph count
oldhtml parameter holds previous inner HTML if needed

var userInput = "<img src=x onerror=alert(1)>";

// DANGEROUS — parses HTML, can execute scripts
$( "#unsafe" ).html( userInput );

// SAFE — displays literal characters
$( "#safe" ).text( userInput );

#unsafe: HTML parsed — XSS vector if input is malicious
#safe: shows literal "<img src=x...>" as text

Never .html(untrustedInput)

$( "#results" ).html( "<p class='loading'>Loading…</p>" );

$.get( "/api/partial", function( html ) {
  $( "#results" ).html( html );
});

Loading placeholder set via .html()
Ajax response replaces entire #results contents
Trust server HTML only from your own backend



Consider .load() shortcut for same pattern

🚀 Common Use Cases

• Template swap — replace widget inner markup after user action or Ajax response.
• Read before transform — getter captures HTML, modify, setter writes back.
• Loading states — .html("<p>Loading…</p>") then replace with results.
• Clone markup — var tpl = $("#template").html() for string-based duplication.
• Debug panels — display raw HTML source to developers via getter + text.
• Dynamic emphasis — callback form builds HTML based on page state.

📝 Notes

• Available since jQuery 1.0 — callback setter added in jQuery 1.4.
• Getter returns only the first matched element’s innerHTML.
• Setter replaces all children — unlike .append().
• Not available on XML documents.
• Uses browser innerHTML — returned HTML may differ slightly from source in older IE.
• For <script> elements, use .text() to set content, not .html().
• Never pass untrusted strings to the setter — XSS risk via parsed markup.

💡 Best Practices