最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Why is DOMParser not preserving inline styles of parsed DOM? - Stack Overflow

programmeradmin2浏览0评论

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

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

Share Improve this question edited May 23, 2017 at 11:51 CommunityBot 11 silver badge asked Jul 12, 2016 at 17:56 scniroscniro 17k8 gold badges66 silver badges107 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 6

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/1999/xhtml" style="color: red">foo</p>';
var node = new DOMParser().parseFromString(str, 'text/xml').firstChild;
document.body.appendChild(node);

CSS will be applied if you use the method like below.

var node = parser.parseFromString('<p style="color: red">foo</p>', 'text/html').firstChild.lastChild.firstChild;

here i am using 'text/html' As per the docs https://developer.mozilla/en/docs/Web/API/DOMParser using text/html returns a HTMLDocument.

fiddle: https://jsfiddle/wLnesqrb/8/

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

But adding namespaces is safer if you want your code to work in XML documents too and not just HTML.

发布评论

评论列表(0)

  1. 暂无评论