{"id":422,"date":"2023-08-25T17:22:38","date_gmt":"2023-08-25T17:22:38","guid":{"rendered":"\/\/api.jquery.com\/?p=422"},"modified":"2026-01-20T17:34:56","modified_gmt":"2026-01-20T17:34:56","slug":"jQuery.parseHTML","status":"publish","type":"post","link":"https:\/\/api.jquery.com\/jQuery.parseHTML\/","title":{"rendered":"jQuery.parseHTML()"},"content":{"rendered":"<article id=\"jQuery-parseHTML1\" class=\"entry method\"><h2 class=\"section-title\">\n<span class=\"name\">jQuery.parseHTML( data [, context ] [, keepScripts ] )<\/span><span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#Array\">Array<\/a><\/span>\n<\/h2>\n<div class=\"entry-wrapper\">\n<p class=\"desc\"><strong>Description: <\/strong>Parses a string into an array of DOM nodes.<\/p>\n<ul class=\"signatures\"><li class=\"signature\">\n<h4 class=\"name\">\n<span class=\"version-details\">version added: <a href=\"\/category\/version\/1.8\/\">1.8<\/a><\/span><a id=\"jQuery-parseHTML-data-context-keepScripts\" href=\"#jQuery-parseHTML-data-context-keepScripts\"><span class=\"icon-link\"><\/span>jQuery.parseHTML( data [, context ] [, keepScripts ] )<\/a>\n<\/h4>\n<ul>\n<li id=\"jQuery-parseHTML-data-context-keepScripts-data\">\n<div><strong>data<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>HTML string to be parsed<\/div>\n<\/li>\n<li id=\"jQuery-parseHTML-data-context-keepScripts-context\">\n<div>\n<strong>context<\/strong> (default: <code>document<\/code>)<\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Element\">Element<\/a>\n<\/div>\n<div>Document element to serve as the context in which the HTML fragment will be created<\/div>\n<\/li>\n<li id=\"jQuery-parseHTML-data-context-keepScripts-keepScripts\">\n<div>\n<strong>keepScripts<\/strong> (default: <code>false<\/code>)<\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Boolean\">Boolean<\/a>\n<\/div>\n<div>A Boolean indicating whether to include scripts passed in the HTML string<\/div>\n<\/li>\n<\/ul>\n<\/li><\/ul>\n<div class=\"longdesc\" id=\"entry-longdesc\">\n    <p><code>jQuery.parseHTML<\/code> uses native methods to convert the string to a set of DOM nodes, which can then be inserted into the document. These methods do render all trailing or leading text (even if that's just whitespace). To prevent trailing\/leading whitespace from being converted to text nodes you can pass the HTML string through <a href=\"\/jQuery.trim\/\"><code>jQuery.trim<\/code><\/a>.<\/p>\n    <p>By default, the <code>context<\/code> is the current <code>document<\/code> if not specified or given as <code>null<\/code> or <code>undefined<\/code>. If the HTML was to be used in another document such as an iframe, that frame's document could be used.<\/p>\n    <p>As of 3.0 the default behavior is changed. If the <code>context<\/code> is not specified or given as <code>null<\/code> or <code>undefined<\/code>, a new <code>document<\/code> is used. This can potentially improve security because inline events will not execute when the HTML is parsed. Once the parsed HTML is injected into a document it does execute, but this gives tools a chance to traverse the created DOM and remove anything deemed unsafe. This improvement does not apply to internal uses of <code>jQuery.parseHTML<\/code> as they usually pass in the current <code>document<\/code>. Therefore, a statement like <code>$( \"#log\" ).append( $( htmlString ) )<\/code> is still subject to the injection of malicious code.<\/p>\n  <h2>Security Considerations<\/h2>\n  <p>Most jQuery APIs that accept HTML strings will run scripts that are included in the HTML. <code>jQuery.parseHTML<\/code> does not run scripts in the parsed HTML unless <code>keepScripts<\/code> is explicitly <code>true<\/code>. However, it is still possible in most environments to execute scripts indirectly, for example via the <code>&lt;img onerror&gt;<\/code> attribute. The caller should be aware of this and guard against it by cleaning or escaping any untrusted inputs from sources such as the URL or cookies. For future compatibility, callers should not depend on the ability to run <em>any<\/em> script content when <code>keepScripts<\/code> is unspecified or <code>false<\/code>.<\/p>\n  <\/div>\n<section class=\"entry-examples\" id=\"entry-examples\"><header><h2>Example:<\/h2><\/header><div class=\"entry-example\" id=\"example-0\">\n<p>Create an array of DOM nodes using an HTML string and insert it into a div.<\/p>\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n22\">22<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n23\">23<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n24\">24<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n25\">25<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n26\">26<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n27\">27<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n28\">28<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n29\">29<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n30\">30<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n31\">31<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n32\">32<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n33\">33<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n34\">34<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n35\">35<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n36\">36<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-meta\">&lt;!doctype <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"utf-8\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>jQuery.parseHTML demo<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/code.jquery.com\/jquery-4.0.0.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"log\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span>&gt;<\/span>Content:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> $log = $( <span class=\"hljs-string\">\"#log\"<\/span> ),<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  str = <span class=\"hljs-string\">\"hello, &lt;b&gt;my name is&lt;\/b&gt; jQuery.\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  html = $.parseHTML( str ),<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  nodeNames = [];<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Append the parsed HTML<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$log.append( html );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Gather the parsed HTML's node names<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$.each( html, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> i, el <\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  nodeNames[ i ] = <span class=\"hljs-string\">\"&lt;li&gt;\"<\/span> + el.nodeName + <span class=\"hljs-string\">\"&lt;\/li&gt;\"<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Insert the node names<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$log.append( <span class=\"hljs-string\">\"&lt;h3&gt;Node Names:&lt;\/h3&gt;\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">\"&lt;ol&gt;&lt;\/ol&gt;\"<\/span> )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  .append( nodeNames.join( <span class=\"hljs-string\">\"\"<\/span> ) )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  .appendTo( $log );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<h4>Demo:<\/h4>\n<div class=\"demo code-demo\"><\/div>\n<\/div><\/section>\n<\/div><\/article>","protected":false},"excerpt":{"rendered":"<p>Parses a string into an array of DOM nodes.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[76,97],"tags":[],"class_list":["post-422","post","type-post","status-publish","format-standard","hentry","category-utilities","category-97"],"_links":{"self":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts\/422","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/comments?post=422"}],"version-history":[{"count":4,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts\/422\/revisions"}],"predecessor-version":[{"id":1566,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts\/422\/revisions\/1566"}],"wp:attachment":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/media?parent=422"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/categories?post=422"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/tags?post=422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}