Question

我只是试图解析并附加JavaScript字符串作为DOM元素。我找到了两种快速方法，其中一种方法是使用DOMParser中的this popular SO answer。这两种方法都有效，但是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);

Answer 2

如果您使用下面的方法，将会应用CSS。

'Error code for procterm was: ' + ErrorCode

这里我正在使用＆text; html＆＃39;根据文档https://developer.mozilla.org/en/docs/Web/API/DOMParser 使用text / html返回HTMLDocument。

小提琴：https://jsfiddle.net/wLnesqrb/8/

Answer 3

var str = '<p style="color: red">foo</p>';
var frag = new DocumentFragment();
frag.innerHTML = str;
document.body.appendChild(frag);

但是，如果您希望代码也能在XML文档中工作而不仅仅是HTML，那么添加命名空间会更安全。

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

3 个答案: