jQuery parseHTML() Method

What Is parseHTML()?

jQuery.parseHTML(data [, context ] [, keepScripts ]) (alias $.parseHTML) turns an HTML string into an array of DOM nodes using native browser parsing (added in jQuery 1.8). Nodes stay detached until you append them.

$.parseHTML(htmlString)  → Array of DOM nodes

nodes = $.parseHTML("<p>Hi</p><span>Go</span>")
// → [ <p>, <span> ]

$("#box").append(nodes)   // now visible on the page

How to Use parseHTML()

Parse offline, inspect the node array, then append only what you trust.

1. Start with an HTML string (fragment, template, or plain text).
2. Optionally .trim() the string to drop edge whitespace text nodes.
3. Call $.parseHTML(html) to get a plain array of nodes.
4. Inspect or filter nodes, then $(target).append(nodes) when ready.

Pseudocode

function parseHTML(data, context, keepScripts):
    // native HTML fragment parse
    nodes = parse data into DOM nodes
    if keepScripts is false:
        remove script elements from nodes
    return nodes   // plain Array

// Typical jQuery flow:
html  = markup.trim()
nodes = $.parseHTML(html)
$("#mount").append(nodes)

Cheat Sheet

Keep these facts handy while parsing HTML with jQuery.

Live Preview

Pick a sample string, parse it with $.parseHTML, and inspect the node list.

sample = Plain text
nodes → 1
names → #text

jQuery Examples

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

var str = "hello, my name is jQuery.";
var html = $.parseHTML(str);
var names = [];

$.each(html, function (i, el) {
  names.push(el.nodeName);
});

console.log(html.length);       // 1
console.log(names.join(", "));  // "#text"

1
#text

var markup = "<p>Hello</p><span>World</span>";
var nodes = $.parseHTML(markup);
var names = $.map(nodes, function (el) { return el.nodeName; });

console.log(names.join(" → "));  // "P → SPAN"
$("#mount").append(nodes);

P → SPAN

var raw = "   <strong>Bold</strong>   ";
var withoutTrim = $.parseHTML(raw);
var withTrim = $.parseHTML(raw.trim());

console.log(withoutTrim.length);  // 3  (#text, STRONG, #text)
console.log(withTrim.length);     // 1  (STRONG only)

3
1

var tag = "scr" + "ipt";
var snippet = "<p>Hi</p><" + tag + ">1</" + tag + ">";

var safe = $.parseHTML(snippet);
var withScripts = $.parseHTML(snippet, null, true);

console.log(safe.length);         // 1  (P only)
console.log(withScripts.length);  // 2  (P + SCRIPT)

1
2

Performance Notes

Parsing dominates cost on large markup. Parse once, keep the node array (or a clone), and append without re-parsing the same string.

Key Takeaways