It looks like the DOMParser uses innerHTML to add stringified elements to the DOM. What's the advantage of using it?
I have pared the difference between using DOMParser().parseFromString() and using element.innerHTML below. Am I overlooking something?
Using DOMParser
const main = document.querySelector('main');
const newNodeString = '<body><h2>I made it on the page</h2><p>What should I do now?</p><select name="whichAdventure"><option>Chill for a sec.</option><option>Explore all that this page has to offer...</option><option>Run while you still can!</option></select><p>Thanks for your advice!</p></body>';
// Works as expected
let newNode = new DOMParser().parseFromString(newNodeString, 'text/html');
let div = document.createElement('div');
console.log('%cArray.from: ', 'border-bottom: 1px solid yellow;font-weight:1000;');
Array.from(newNode.body.children).forEach((node, index, array) => {
div.appendChild(node);
console.log('length:', array.length, 'index: ', index, 'node: ', node);
})
main.appendChild(div);
Using innerHTML
const main = document.querySelector('main');
const newNodeString = '<h2>I made it on the page</h2><p>What should I do now?</p><select name="whichAdventure"><option>Chill for a sec.</option><option>Explore all that this page has to offer...</option><option>Run while you still can!</option></select><p>Thanks for your advice!</p>';
// Works as expected
let div = document.createElement('div');
div.innerHTML = newNodeString;
main.appendChild(div);
I expect that DOMParser().parseFromString() provides some additional functionality that I'm unaware of.
https://developer.mozilla/en-US/docs/Web/API/DOMParser#DOMParser_HTML_extension
It looks like the DOMParser uses innerHTML to add stringified elements to the DOM. What's the advantage of using it?
I have pared the difference between using DOMParser().parseFromString() and using element.innerHTML below. Am I overlooking something?
Using DOMParser
const main = document.querySelector('main');
const newNodeString = '<body><h2>I made it on the page</h2><p>What should I do now?</p><select name="whichAdventure"><option>Chill for a sec.</option><option>Explore all that this page has to offer...</option><option>Run while you still can!</option></select><p>Thanks for your advice!</p></body>';
// Works as expected
let newNode = new DOMParser().parseFromString(newNodeString, 'text/html');
let div = document.createElement('div');
console.log('%cArray.from: ', 'border-bottom: 1px solid yellow;font-weight:1000;');
Array.from(newNode.body.children).forEach((node, index, array) => {
div.appendChild(node);
console.log('length:', array.length, 'index: ', index, 'node: ', node);
})
main.appendChild(div);
Using innerHTML
const main = document.querySelector('main');
const newNodeString = '<h2>I made it on the page</h2><p>What should I do now?</p><select name="whichAdventure"><option>Chill for a sec.</option><option>Explore all that this page has to offer...</option><option>Run while you still can!</option></select><p>Thanks for your advice!</p>';
// Works as expected
let div = document.createElement('div');
div.innerHTML = newNodeString;
main.appendChild(div);
I expect that DOMParser().parseFromString() provides some additional functionality that I'm unaware of.
Share Improve this question edited May 27, 2019 at 0:48 participator asked May 27, 2019 at 0:22 participatorparticipator 3422 gold badges3 silver badges10 bronze badges 13-
1
Right, it strips out invalid HTML through error correction, which is why it isn’t a big deal. Anyway, if all you’re doing is setting
innerHTMLand inserting that into the document, there’s no point in parsing withDOMParserfirst. If you’re not inserting directly into the document, then its value shows up – for example, when sanitizing potentially malicious HTML. The simple act of settinginnerHTMLcan run scripts (<img onerror>IIRC). – Ry- ♦ Commented May 27, 2019 at 0:58 -
3
consider
document.createElement('div').innerHTML= '<img onerror=alert(666) src=/4>';; you don't get that alert() with a DOMParser(), which also doesn't hit the url endpoint like innerHTML example would. Note that's without attaching to the document. – dandavis Commented May 27, 2019 at 1:22 -
1
The link you've shared does not give the code the browser uses to implement
DOMParser; it is more of a polyfill. I wouldn't assume anything about browser internals from that code. – Heretic Monkey Commented May 27, 2019 at 1:46 - 1 @participator: I said “if you’re not inserting directly into the document”. And “there won't be an alert in either situation until you actually attach it to the DOM” is incorrect – try it. – Ry- ♦ Commented May 27, 2019 at 1:52
-
1
There's a few other miscellaneous side effects too. iirc, problem included; imported stylesheets, external media,
<base>tags,<title>tags, namespace pollution, and minor/possibly outmoded quirks, including all of IE's innerHTML madness from over the years. For simple examples, innerHTML works and does so intuitively and cleanly. When innerHTML doesn't work for a project for one reason or another, you can use the more precise and verbose tools; DOMParser is a nice ace to tuck up your sleeve... – dandavis Commented May 27, 2019 at 2:11
1 Answer
Reset to default 3Well, for one thing, DOMParser can parse XML files. It also validates that the XML is well formed and produces meaningful errors if not. More to the point, it is using the right tool for the right job.
I've used it in the past to take an uploaded XML file and produce HTML using a predefined XSLT style sheet, without getting a server involved.
Obviously, if all you're doing is appending the string to an existing DOM, and innerHTML (or outerHTML) works for you, continue using it.