动态创建Bootstrap网格

Question

我正在尝试使用JavaScript函数动态生成引导程序列。目标是将它们作为不同的列显示在一行中。

当前的样子：

我正在使用div ID在window.onload（）上调用此函数：

// Update the bootstrap grid once the tasks are added
function updateTaskContainerHead(containerId){
    let containerHead = document.getElementById(containerId);
    // Take the row headings and make an HTML container out of them
    let tblRowHeadings = ['Task Name','Assigned To','Priority','Due Date',''];
    let tblHeadRow = document.createElement("div");
    tblHeadRow.classname="row";
    for (let heading of tblRowHeadings){
        let tblHeadCell = document.createElement("div");
        tblHeadCell.className="col";
        let cellText = document.createTextNode(heading);
        tblHeadCell.appendChild(cellText);
        tblHeadRow.appendChild(tblHeadCell);
    }
    containerHead.appendChild(tblHeadRow);
}

HTML组件只是：

<lead>Completed Tasks</lead>
<div class="container" id="ongoingTasksContainer">

您认为可能是什么问题？

Answer 1

只是一个拼写..区分大小写的一个：

tblHeadRow.classname="row";

应为：

tblHeadRow.className="row";

Answer 2

您没有正确设置tblHeadRow类。

您需要使用element.classList.add(className)方法。 (docs)

如果您改用此列，则会有以下列：

tblHeadRow.classList.add("row");

这里是fiddle供参考。

---

但是，我真的建议在这种情况下使用表。如果要创建tbl，head和cell，则似乎是您要使用的表，bootstrap has helper classes for those也是如此。