1 Way
Use document.cloneNode[]
Performance is:
Call to document.cloneNode[]
took ~0.22499999977299012 milliseconds.
and maybe will be more.
var t0, t1, html;
t0 = performance.now[];
html = document.cloneNode[true];
t1 = performance.now[];
console.log["Call to doSomething took " + [t1 - t0] + " milliseconds."]
html.documentElement.innerHTML = 'Testtest1';
console.log[html.getElementById["test1"]];
2 Way
Use document.implementation.createHTMLDocument[]
Performance is:
Call to document.implementation.createHTMLDocument[]
took ~0.14000000010128133 milliseconds.
var t0, t1, html;
t0 = performance.now[];
html = document.implementation.createHTMLDocument["test"];
t1 = performance.now[];
console.log["Call to doSomething took " + [t1 - t0] + " milliseconds."]
html.documentElement.innerHTML = 'Testtest1';
console.log[html.getElementById["test1"]];
3 Way
Use document.implementation.createDocument[]
Performance is:
Call to document.implementation.createHTMLDocument[]
took ~0.14000000010128133 milliseconds.
var t0 = performance.now[];
html = document.implementation.createDocument['', 'html',
document.implementation.createDocumentType['html', '', '']
];
var t1 = performance.now[];
console.log["Call to doSomething took " + [t1 - t0] + " milliseconds."]
html.documentElement.innerHTML = 'Testtest';
console.log[html.getElementById["test1"]];
4 Way
Use new Document[]
Performance is:
Call to document.implementation.createHTMLDocument[]
took ~0.13499999840860255 milliseconds.
- Note
ParentNode.append
is experimental technology in 2020 year.
var t0, t1, html;
t0 = performance.now[];
//---------------
html = new Document[];
html.append[
html.implementation.createDocumentType['html', '', '']
];
html.append[
html.createElement['html']
];
//---------------
t1 = performance.now[];
console.log["Call to doSomething took " + [t1 - t0] + " milliseconds."]
html.documentElement.innerHTML = 'Testtest1';
console.log[html.getElementById["test1"]];
Description: Parses a string into an array of DOM nodes. data HTML string to be parsed context [default: Document element to serve as the context in which the HTML fragment will be created keepScripts [default: A Boolean indicating whether to include scripts passed in the HTML string By default, the As of 3.0 the default behavior is changed. If the Most jQuery APIs that accept HTML strings will run scripts that are included in the HTML. Create an array of DOM nodes using an HTML string and insert it into a div.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 jQuery.parseHTML[ data [, context ] [, keepScripts ] ]Returns: Array
version added:
1.8jQuery.parseHTML[ data [, context ] [, keepScripts ] ]
document
]false
]jQuery.parseHTML
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 jQuery.trim
.context
is the current document
if not specified or given as null
or undefined
. If the HTML was to be used in another document such as an iframe, that frame's document could be used.context
is not specified or given as null
or undefined
, a new document
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 jQuery.parseHTML
as they usually pass in the current
document
. Therefore, a statement like $[ "#log" ].append[ $[ htmlString ] ]
is still subject to the injection of malicious code.Security Considerations
jQuery.parseHTML
does not run scripts in the parsed HTML unless keepScripts
is explicitly true
. However, it is still possible in most environments to execute scripts indirectly, for example via the 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 any script content when
keepScripts
is unspecified or false
.Example:
jQuery.parseHTML demo
str = "hello, my name is jQuery.",
html = $.parseHTML[ str ],
// Append the parsed HTML
// Gather the parsed HTML's node names
$.each[ html, function[ i, el ] {
nodeNames[ i ] = "
$log.append[ "
Node Names:
" ]; .append[ nodeNames.join[ "" ] ]