DOMParser introduces DOM but doesn't apply CSS stylesheets after injection?

I have a small test file:

http://jsfiddle.net/9xwUx/1/

The code comes down to the following (given the node with the identifier "target"):

var string = '<div class="makeitpink">this should be pink, but is not</div>';
var parser = new DOMParser();
var domNode = parser.parseFromString(string,"text/xml");
document.getElementById("target").appendChild(domNode.firstChild);

If you run a test file and then test the node target with the firebug / chrome inspector and select any node in the jsfiddle iframe body tag and do "edit as HTML", add a random character anywhere as a string [not the domnode attribute to make it clear] , and save, apply style. but not earlier than that. Saying I'm confused is an understatement.

Can anyone clarify what is going on here? Thank.

+5
source share
2 answers

mime text/html :

var parser = new DOMParser()
var doc = parser.parseFromString(markup, 'text/html')
return doc.body.firstChild

, Chrome Firefox. , .

+3

, , text/xml, , XML-, CSS. " HTML", HTML, , CSS.

, -, innerHTML, :

var temp = document.createElement("div")
//assuming you have some HTML partial called 'fragment'
temp.innerHTML = fragment
return temp.firstChild

jsfiddle. DOMParser, XMLDocument, text/xml.

+1

All Articles