Javascript innerHTML失去CSS导入

Question

当我使用innerHTML函数时，它可以完美运行。 但这就像它不在乎CSS样式。

例：

<link href="style.css" rel="stylesheet" type="text/css"/>

所以我用：

<div id="container">Something</div>

并且确实适用该样式。 但是，如果我通过javascript innerHTML执行此操作，则不会加载样式。 基本上，javascript innerHTML不遵循我主页中包含的CSS样式规则。 为什么？

另一个例子：

<ul data-role="listview"><li>Something</li></ul>

此处显示的所有内容均具有样式格式。

现在，如果我这样做：

var output = document.getElementById("output");
output.innerHTML = '<ul data-role="listview">';
output.innerHTML = '<li>Something</li>';
output.innerHTML = '</ul>';

我没有得到相同的结果，但是得到了一个默认格式的普通列表，而不是我的样式列表。

Answer 1

您必须使用document.createElement创建新元素appendChild来追加子内容。

li是ul子代，而ul也是div#output的子代

希望此片段有用

var _ul = document.createElement('ul');
var _li=  document.createElement('ul');

_li.innerHTML="Something";
_ul.appendChild(_li);
document.getElementById("output").appendChild(_ul);

JSFIDDLE