jQuery .html() Method

Beginner

7 min read

Updated: Oct 2026

5 examples

Live preview

Definition

What Is `.html()`?

.html() gets or sets an element’s HTML contents via innerHTML (since jQuery 1.0). No args → read the first match. With a string → replace children of every match. Not available on XML documents.

Remember

var markup = $("#box").html();           // get (first match)
$("#box").html("<strong>Hi</strong>");    // set (replace children)
$("div").html(function (i, old) {        // callback since 1.4
  return old + " <em>#" + i + "</em>";
});

Need	Use
Read / write markup	`$(el).html()` / `.html(str)`
Plain text only	`$(el).text()`
Add without wiping	`$(el).append()`
Clear children	`$(el).empty()`

Approach

How to Use `.html()`

Decide whether you are reading or replacing inner markup.

Select the element(s).
Call .html() with no args to read the first match.
Pass an HTML string to replace all children of every match.
Or pass a function (index, oldhtml) since 1.4 to build new markup per element.

Piece	Required?	Role
Matched set	Yes	Element(s) to read or update
`htmlString`	For setter	Trusted markup that replaces children
`function`	Optional (1.4+)	Returns new HTML; gets `index`, `oldhtml`

Pseudocode

if no argument:
    return innerHTML of first matched element
    // (undefined if empty set)

if argument is a function:
    for each matched element el at index i:
        old = el.innerHTML
        empty el (clear children + clean data/handlers)
        newHtml = function.call(el, i, old)
        set el.innerHTML = newHtml
else:
    for each matched element el:
        replace all children with parsed htmlString
        // child data/handlers cleaned first

return original matched set (setter)

Reference

Cheat Sheet

Keep these facts handy while editing markup.

Topic	Detail
Get	`.html()` → first match only
Set	`.html(htmlString)` → every match
Callback	`.html(fn)` since 1.4
Since	jQuery 1.0
Engine	Browser `innerHTML`
XML	Not supported
Security	Untrusted strings → XSS risk

Try it

Live Preview

Get, set, or clear the sample box’s HTML.

Browser demo of .html() get / set — same idea as the examples below.

Hello world

Result

$("#box").html()
→ Hello <em>world</em>

Code

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

Example 1 — Get HTML

Read the inner markup of the first matched element.

jQuery

var markup = $("#box").html();
// e.g. "Hello <em>world</em>"

Try It Yourself

How It Works

Select. $("#box") finds the target.
Get. No argument → read innerHTML.
First only. Extra matches are ignored by the getter.
String. You get markup as text, not a live jQuery set.

Example 2 — Set HTML

Replace everything inside each matched element.

jQuery

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

Try It Yourself

How It Works

Select. Every div is matched.
Clean. Old children lose jQuery data/handlers, then are removed.
Parse. The string becomes DOM nodes via innerHTML.
Replace. Previous content is gone — not appended.

Example 3 — `.html()` vs `.text()`

Read markup, then turn it into visible text (tags shown as characters).

jQuery

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

Try It Yourself

How It Works

Get. .html() returns markup including tags.
Set text. .text(htmlString) inserts that string as plain text.
Result. Users see <b>...</b> characters, not bold formatting.
Lesson. Markup vs text are different jobs — pick deliberately.

Example 4 — Callback Form

Build new HTML from the old value (since jQuery 1.4).

jQuery

$("#box").html(function (index, oldhtml) {
  return oldhtml + " <em>#" + index + "</em>";
});

Try It Yourself

How It Works

Empty first. jQuery clears the element before calling your function.
oldhtml. Use the second argument — do not re-read .html() inside.
index. Zero-based position in the matched set.
Return. Your return value becomes the new inner HTML.

Example 5 — Set, Then Style Inserted Nodes

Insert markup, then select and tweak what you just added.

jQuery

$("div").html("Wow! <b>Such excitement...</b>");
$("div b")
  .append(document.createTextNode("!!!"))
  .css("color", "red");

Try It Yourself

How It Works

Insert. .html() places the new markup.
Reselect. $("div b") finds the inserted <b>.
Append. Adds text nodes after the bold text.
Style. .css() colors the bold element (demo only).

Edge Cases & Pitfalls

Check these before shipping markup updates.

xss

Untrusted strings are unsafe

Scripts and event attributes in HTML strings can run. Sanitize, escape, or use .text().

getter

Getter is first-match only

$("div").html() never concatenates every div — only the first.

callback

Element is emptied before the callback

Rely on oldhtml, not a nested .html() read inside the function.

form

Textareas need `.text()` / `.val()`

Official guidance: a <textarea> does not contain HTML — do not use .html() for its value.

Compatibility

Browser Support

.html() has been part of jQuery since 1.0. The function callback arrived in 1.4. It uses the browser’s innerHTML and works wherever your loaded jQuery version runs (HTML documents only).

✓ Stable · jQuery 1.0+

jQuery .html()

Supported in all browsers that run jQuery 1.0+. Prefer a current jQuery 3.x build for modern projects.

100% jQuery core method

Google Chrome All versions · Desktop & Mobile

Full support

Mozilla Firefox All versions · Desktop & Mobile

Full support

Apple Safari All versions · macOS & iOS

Full support

Microsoft Edge All versions · Chromium & Legacy

Full support

Internet Explorer IE 6+ · Legacy environments

Full support

Opera All modern versions

Full support

.html() Universal

Bottom line: Safe for everyday UI with trusted markup. Never feed untrusted strings into .html().

Analysis

Performance Notes

Approach	Cost	Best for
`.html()` get	Cheap	Reading one container
`.html(small)`	Moderate	Swapping panel markup
Huge HTML strings often	Expensive	Avoid — update smaller pieces

Setting HTML rebuilds the subtree. For frequent small changes, prefer .text(), .append(), or updating one node.

Remember

Key Takeaways

Get: first match only; returns an HTML string.
Set: replaces all children of every match.
Safety: untrusted input → use .text() or sanitize.
Vs append: html replaces; append adds.

One line: .html() is jQuery’s get/set for innerHTML — powerful for trusted markup, dangerous for untrusted strings.

Frequently Asked Questions

What does jQuery .html() do?

With no arguments, .html() returns the HTML contents (innerHTML) of the first matched element. With an argument, it replaces all children inside every matched element. Available since jQuery 1.0. Not available on XML documents.

What is the difference between .html() and .text()?

.html() reads or writes markup — tags are parsed when setting. .text() reads or writes plain text only. Prefer .text() for untrusted or plain strings; use .html() only with trusted markup.

What is the difference between .html() and .append()?

.html() replaces all existing inner content. .append() adds content as the last child and keeps what was already there.

Does the getter return HTML from every match?

No. The getter returns only the first element's innerHTML. Use .each() if you need every element's HTML.

Can .html() use a callback?

Yes, since jQuery 1.4: .html(function(index, oldhtml)). jQuery empties the element before the function runs; use oldhtml for the previous markup. Return the new HTML string.

Is .html() safe with user input?

No. Setting HTML from untrusted sources can cause XSS via script tags or event attributes. Escape or sanitize first, or use .text() instead.

How is .html("") different from .empty()?

Both clear contents. Prefer .empty() when your intent is “clear this container.” Prefer .html(string) when you are replacing markup in one step.

Next: .prependTo()

Insert matched elements at the start of a target container.

.prependTo() tutorial →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

jQuery .empty() Method jQuery .prependTo() Method

jQuery .html() Method

What Is .html()?

How to Use .html()

Pseudocode

Cheat Sheet

Live Preview

jQuery Examples

Example 1 — Get HTML

How It Works

Example 2 — Set HTML

How It Works

Example 3 — .html() vs .text()

How It Works

Example 4 — Callback Form

How It Works

Example 5 — Set, Then Style Inserted Nodes

How It Works

Edge Cases & Pitfalls

Untrusted strings are unsafe

Getter is first-match only

Element is emptied before the callback

Textareas need .text() / .val()

Browser Support

jQuery .html()

Performance Notes

Key Takeaways

Frequently Asked Questions

Related Topics

.text()

.append()

.empty()

.prepend()

.replaceWith()

DOM hub

Next: .prependTo()

About the author

What Is `.html()`?

How to Use `.html()`

Example 3 — `.html()` vs `.text()`

Textareas need `.text()` / `.val()`