Почему DOMParser не сохраняет встроенные стили анализируемого 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);

Каждый метод вводит node соответственно, а DOM отражает следующее...

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

Однако только последний красный! Любая идея, что может здесь происходить?

JSFiddle - демонстрация воспроизведения

Ответ 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);

Ответ 2

CSS будет применяться, если вы используете метод, как показано ниже.

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

здесь я использую 'text/html' В соответствии с документами https://developer.mozilla.org/en/docs/Web/API/DOMParser использование text/html возвращает HTMLDocument.

скрипт: https://jsfiddle.net/wLnesqrb/8/

Ответ 3

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

Но добавление пространств имен более безопасно, если вы хотите, чтобы ваш код работал и в XML-документах, а не только в HTML.