javascript - 为什么DOMParser不保留已解析DOM的内联样式？

我只是试图解析并将JavaScript字符串附加为DOM元素。我发现了两种快速的方法来执行此操作，其中一种方法是使用DOMParser，如this popular SO answer所示。两种方法都可以工作，但是DOMParser方法出于某种原因不尊重我定义的内联样式-即使两种方法都将注入(inject)的是完全相同的动态标记。考虑以下...

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

每种方法都相应地注入(inject)节点，并且DOM反射(reflect)以下内容...

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

但是，只有最后一个是红色!知道这里可能会发生什么吗？

JSFiddle-复制演示

最佳答案

那是因为您没有设置 namespace 。 style属性在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);