为什么DOMParser不保留已解析DOM的内联样式？ [英] Why is DOMParser not preserving inline styles of parsed DOM?

问题描述

我只是试图解析并附加一个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 - 复制演示

解决方案

这是因为你没有设置命名空间。 style 属性在XML中没有任何特殊含义：

  var str ='< p xmlns =http://www.w3.org/1999/xhtmlstyle =color：red> foo< / p>'; var node = new DOMParser（）。parseFromString（str，'text / xml'）。firstChild; document.body.appendChild（node）;  

div>

I am simply trying to parse and append a JavaScript string as a DOM element. I have found two quick ways to do this, one of which is using DOMParser as seen in this popular SO answer. Both methods work, however, the DOMParser approach for some reason is not respecting the inline styles I define - even though both methods inject the exact same dynamic markup. Consider the following...

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

Each method injects the node accordingly and the DOM reflects the following...

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

However, only the last is red! Any idea what can possibly be going on here?

---

JSFiddle - reproduction demo

解决方案

That's because you didn't set a namespace. style attributes don't have any special meaning in 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);

这篇关于为什么DOMParser不保留已解析DOM的内联样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！