Как применить стили к новодобавленному элементу?

Question

[Посторонним В.]

JS в очередной раз удивил. Есть простейший скрипт, который преобразует строку с HTML в DOM Element, и прикрепляет элемент к указанному контейнеру:

<div class="container">
<div class="red">Red</div>
</div>

.red {
background: red;
}

function htmlToDOM(html)
{
    let parser = new DOMParser();
    return parser.parseFromString(html, "text/xml").documentElement;
}

let code = '<div class="red">Red</div>';

let element = htmlToDOM(code);
let container = document.getElementsByClassName('container')[0];
container.appendChild(element);

https://jsfiddle.net/a2dmtabt/

Всё отлично, элемент получается такой же, как соседние, НО без стилей.
Что за чертовщина, и что прописать, чтобы к нему сразу применялись указанные в CSS стили?

Answer 1

[Посторонним В.]

Оказалось, что мой код работает-таки в Firefox, например.

Решил проблему сменой xml на Html. Правда, пришлось выдирать элемент из html/body.

function htmlToDOM(html)
{
    let parser = new DOMParser();
    return parser.parseFromString(html, "text/html").getElementsByTagName('body')[0].firstChild;
}

Другой возможный вариант:

function htmlToDOM(html)
{
    let temp = document.createElement("div");
    temp.innerHTML = html;
    return temp.firstChild;
}

Comments

[Kovalsky]

Вот о том и речь, что по сути проблема была в использовании функции, предназначенной для другого: DOMParser создаёт целый отдельный документ, и конфликт был связан именно с этим - у документов был разный неймспейс, соответственно трансфер элементов между ними был возможен только частичный.