Динамическое создание сетки Bootstrap

Question

Я пытаюсь использовать функцию JavaScript для динамического создания столбцов начальной загрузки. Цель состоит в том, чтобы они отображались в одной строке в виде разных столбцов.

В настоящее время это выглядит так:

Я вызываю эту функцию для window.onload () с идентификатором div:

// 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). (документы)

Если вы воспользуетесь этим, вместо этого у вас будут столбцы:

tblHeadRow.classList.add("row");

Вот для справки скрипка .

---

Однако я бы очень рекомендовал использовать таблицу в этой ситуации.Если вы создаете tbl, head и cell, кажется, что вам нужна таблица, а bootstrap также имеет вспомогательные классы для этих .