Creating Bootstrap grid dynamically

Question

I am trying to use a JavaScript function to generate bootstrap columns dynamically. The goal is to have them displayed in a single row as different columns.

Currently this is how it looks like:

I am calling this function on window.onload() with the div id:

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

and the HTML component is just:

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

What do you think might be the problem?

Answer 1

just a spello .. well case sensitive one:

tblHeadRow.classname="row";

should be:

tblHeadRow.className="row";

Answer 2

You're not setting the tblHeadRow class correctly.

You need to use element.classList.add(className) method. (docs)

If you use this instead you will have columns:

tblHeadRow.classList.add("row");

Here is a fiddle for reference.

---

However, I would really recommend using a table in this situation. If you're creating a tbl, head and cell it seems like a table is what you're after and bootstrap has helper classes for those as well.