jQuery jQuery.parseHTML() Method

What You’ll Learn

The jQuery.parseHTML() utility converts an HTML string into an array of DOM nodes you can inspect or append. This tutorial covers the official jQuery API demo, element fragments, whitespace trimming, the keepScripts flag, security considerations, and comparisons with $(htmlString).

Introduction

Dynamic web apps often receive HTML snippets from templates, AJAX responses, or user input. Before inserting that markup into the page, you may want to parse it into real DOM nodes, inspect what was created, and control whether scripts are included.

jQuery added jQuery.parseHTML() (also written $.parseHTML()) in version 1.8 for exactly that job. It uses native browser parsing under the hood and returns a plain array — not a jQuery collection — so you decide when and where nodes enter the live document.

Understanding the jQuery.parseHTML() Method

jQuery.parseHTML(data) takes an HTML string and produces an array of nodes. Entries can be elements (<p>), text nodes (plain text without tags), or comments. The nodes are detached until you append them with .append(), .html(), or similar APIs.

By default, keepScripts is false, so <script> tags are stripped from the result. That makes parseHTML a safer parsing step than blindly injecting HTML — though you must still treat untrusted strings as a security risk.

📝 Syntax

General form of jQuery.parseHTML:

jQuery.parseHTML( data [, context ] [, keepScripts ] )
// or
$.parseHTML( data [, context ] [, keepScripts ] )

Parameters

• data — the HTML string to parse into DOM nodes.
• context — optional document element used as the parsing context (defaults to a detached document in jQuery 3.0+ when omitted).
• keepScripts — optional boolean; when true, <script> elements are included in the result (default false).

Return value

• An array of DOM nodes parsed from the string.

Official jQuery API workflow

var str = "hello, my name is jQuery.";
var html = $.parseHTML(str);
$("#log").append(html);

Examples Gallery

Example 1 follows the official jQuery API demo. Use DevTools or the Try-it links to run each snippet interactively.

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

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

console.log(nodeNames.join(", ")); // #text

#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

P → SPAN

var raw = "   <strong>Bold</strong>   ";

var withoutTrim = $.parseHTML(raw);
var withTrim    = $.parseHTML(raw.trim());

console.log("Without trim:", withoutTrim.length, "nodes");
console.log("With trim:", withTrim.length, "nodes");

Without trim: 3 nodes
With trim: 1 node

var snippet = '<p>Hi</p><script>alert("x")</script>';

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

console.log("Default count:", safe.length);    // 1 (P only)
console.log("keepScripts:", unsafe.length);    // 2 (P + SCRIPT)

Default count: 1
keepScripts: 2

var template = '<article class="card"><h2>Title</h2><p>Body</p></article>';
var nodes = $.parseHTML(template.trim());

// Inspect before inserting
var hasCard = nodes.length === 1 && nodes[0].className === "card";

if (hasCard) {
  $("#mount").empty().append(nodes);
  console.log("Card mounted");
}

Card mounted

🚀 Common Use Cases

• AJAX HTML partials — parse server-rendered snippets before inserting into a container.
• Template strings — convert markup templates to nodes for inspection or transformation.
• Plugin rendering — build widget DOM offline, then append once structure is verified.
• iframe context — pass an iframe’s document as context when parsing for that frame.
• Security pipelines — walk parsed nodes and remove unsafe attributes before mount.
• Text-only content — parse plain strings into text nodes for consistent append APIs.

📝 Notes

• Available since jQuery 1.8; context default changed in jQuery 3.0 for safer detached parsing.
• Scripts in the HTML string do not execute during parse — only after insertion into a document.
• Inline event attributes (like onclick) may still be a risk after injection — sanitize untrusted HTML.
• Most jQuery HTML APIs can run scripts when strings are inserted; parseHTML is the controlled parsing step.
• Return value is a plain array — wrap with $() if you need jQuery methods on the nodes.
• For iframe documents, pass the iframe’s contentDocument as context.

💡 Best Practices