如何为附加元素应用样式？

Question

我真的很惊讶。我有一个简单的脚本将HTML代码转换为DOM元素并将其附加到指定的容器。附加的元素看起来像其他子元素，但没有样式！

为什么会这样以及如何将样式应用于新元素？

＆＃13;

＆＃13;

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

＆＃13;

.red {
background: red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在WebKit上运行。