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

Question

我只是试图解析并附加JavaScript字符串作为DOM元素.我找到了两种快速的方法,其中一种方法是使用DOMParser,就像在这个流行的SO答案中看到的那样.两种方法都有效,但是,DOMParser出于某种原因,这种方法并不尊重我定义的内联样式 - 即使两种方法都注入了完全相同的动态标记.考虑以下...

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

每个方法都相应地注入节点,DOM反映以下内容......

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

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

---

JSFiddle - 复制演示

Answer 1

那是因为您没有设置名称空间。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);