Javascript 材质设计Lite的复选框为'；t在列表上工作

我制作了一个简单的网页，从Firebase检索数据并显示在列表中。。。我正在使用Material Design Lite框架使页面更加美观。一切都很好，但唯一的问题是复选框按钮没有材质设计。有人知道会发生什么吗

我遵循了MDL网站中的“化身和控件”示例：并将其转换为JavaScript代码。这是我的密码：

var ul = document.getElementById(list);
var li = document.createElement("li");
var span = document.createElement("span");
var spanCheckbox = document.createElement("span");
var label = document.createElement("label");
var input = document.createElement("input");
input.setAttribute("type", "checkbox");
input.setAttribute("id", (i + 1));
input.setAttribute("class", "mdl-checkbox__input");
input.setAttribute("onclick", "done(this.id)");
if (list === "solved") input.setAttribute("checked", "true");
componentHandler.upgradeElement(label);
label.setAttribute("class", "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect");
label.setAttribute("for", (i + 1));
spanCheckbox.setAttribute("class", "mdl-list__item-secondary-action");
ul.setAttribute("class", "demo-list-control mdl-list");
li.setAttribute("id", (i + 1));
li.setAttribute("onclick", "done(this.id)");
li.setAttribute("class", "mdl-list__item clearList");
span.setAttribute("class", "mdl-list__item-primary-content");
span.appendChild(document.createTextNode(description));
label.appendChild(input);
spanCheckbox.appendChild(label);
li.appendChild(span);
li.appendChild(spanCheckbox);
ul.appendChild(li);

我已经用Chrome开发者工具检查了checkbox的HTML，它等于Material Design Lite网站示例的HTML。任何其他东西都可以正常工作，因此js或css文件没有问题

加载页面后，Chrome Developer Tools中的HTML代码：

<span class="mdl-list__item-secondary-action">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="1"><input type="checkbox" id="1" class="mdl-checkbox__input" onclick="done(this.id)" checked="true">
</label>
</span>

---

已解决：

componentHandler.upgradeElement（标签）需要在创建标签后保留