scniro scniro - 4 months ago 10
HTML Question

Why is DOMParser not preserving inline styles of parsed DOM?

I am simply trying to parse and append a JavaScript string as a DOM element. I have found two simple ways to do this, one of which is using DOMParser as seen in this popular SO answer. Both methods work, however, the DOMParser method for some reason is not preserving the styles - even though both methods inject the exact same dynamic markup. Consider the following...

<div></div>





var parent = document.getElementsByTagName('div')[0]

// ---- case 1 ---------------

var parser = new DOMParser();
var node = parser.parseFromString('<p style="color: red">foo</p>', 'text/xml').firstChild;
parent.appendChild(node);

// ---- case 2 ---------------

var wrapper= document.createElement('div');
wrapper.innerHTML= '<p style="color: red">foo</p>';
var node2 = wrapper.firstChild;
parent.appendChild(node2);


Each method injects the node accordingly and the DOM reflects the following...

<div>
<p style="color: red">foo</p>
<p style="color: red">foo</p>
</div>


However, only the last is red! Any idea what can possibly be going on here?




JSFiddle - reproduction demo

Answer

That's because you didn't set a namespace. style attributes don't have any special meaning in XML:

var str = '<p xmlns="http://www.w3.org/1999/xhtml" style="color: red">foo</p>';
var node = new DOMParser().parseFromString(str, 'text/xml').firstChild;
document.body.appendChild(node);