Question

我在：

处有一个小问题

代码归结为以下内容（给定id为“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);

如果您运行测试用例，然后通过firebug / chrome Web检查器检查目标节点并选择jsfiddle的iframe的body标签中的任何节点，并执行“编辑为HTML”，则将随机字符串添加为字符串[不是domnode的属性，要清楚，并且“保存”，应用样式。但不是在那之前。说我很困惑是轻描淡写。

有人可以澄清这里发生了什么吗？感谢。

Answer 1

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

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

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

Answer 2

有点晚了，但原因是你使用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实例的输出。

DOMParser注入DOM但是一旦注入就不应用css样式表？

2 个答案: