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

问题描述：

我有一个小测试用例了在：DOMParser注入DOM但注入后不应用css样式表？

的代码归结为以下（给定的一个节点ID为“目标”）：

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);

如果运行测试用例，然后通过firebug/chrome web检查器检查目标节点，并选择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

你”已经注意到你的jsfiddle。基本上，当您使用text/xml选项时，它归结为的输出为XMLDocument的实例。

答

您可以将MIME类型更改为text/html并执行以下操作：

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

我没有每一个浏览器上测试，但它适用于Chrome和Firefox。我认为没有任何理由在其他地方无效。

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

相关推荐