Javascript DOMParser注入DOM，但注入后不应用css样式表？

我有一个小测试用例在：

代码归结为以下内容（给定一个id为“target”的节点）：

var string='这应该是粉红色的，但不是'；
var parser=新的DOMParser（）；
var domNode=parser.parseFromString（string，“text/xml”）；
document.getElementById（“目标”）.appendChild（domNode.firstChild）；

如果运行testcase，然后通过firebug/chrome web inspector检查目标节点，并选择jsfiddle的iframe的body标记内的任何节点，并执行“编辑为HTML”，在任意位置添加一个随机字符作为字符串[显然不是domnode的属性]，然后执行“保存”，则会应用该样式。但在那之前不行。 说我困惑是轻描淡写的

有人能澄清一下这是怎么回事吗？

---

谢谢。

有点晚了，但原因是您已经使用

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

---

您已经在JSFIDLE中注意到了这一点。基本上，当您使用

text/xml

选项时，

DOMParser

的输出是

XMLDocument

的一个实例。

您可以将mime类型更改为

text/html

，并执行以下操作：

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

我没有在每个浏览器上测试，但它可以在Chrome和Firefox上运行。我看不出有任何理由它在其他地方不起作用

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