How can I programmatically (in JavaScript) add "sub-divs" to divs?

Question

I have a related / preliminary question here.

The following CSS and HTML, adapted from here is, I think, a good start, or at least intriguing:

CSS

.container {
  display: table;
}
.row {
  display: table-row;
}
.column {
  display: table-cell;
}

HTML

Note: I've added the IDs

<div class="container">
    <div class="row" id="row1">
        <div class="column" id="row1Col1">Column 1</div>
        <div class="column" id="row1Col2">Column 2</div>
        <div class="column" id="row1Col3">Column 3</div>
    </div>
    <div class="row" id="row2">
        <div class="column" id="row2Col1">Date goes here</div>
        <div class="column" id="row2Col2">Shift1</div>
        <div class="column"  id="row2Col3">Blank to begin with</div>
    </div>
</div>

But I need to dynamically add to this, so that each Column1 always stays as "tall" as the corresponding Column2 as rows are added to Column2 and that, as rows are added to Column3, the first row of Column2 (the Shift, such as "Shift 1") keeps vertical pace with it. So you would have something like this:

Column1         Column2     Column3
======          ======      ======
Mon Aug 24      Shift 1     Something about Shift1
                            More about Shift1
                            Yet more about Shift1
                Shift 2     Something about Shift2
                            More about Shift2
                Shift 3     Something about Shift3
Tues Aug 25     Shift1      

To be as clear as possible, I will show what the appearace would be before any programmatic additions are made:

Column1         Column2     Column3
======          ======      ======
Mon Aug 24      Shift 1     

...then after adding two more rows ("Shift1" and "Shift2") to Column2, and related verbiage in Column3:

Column1         Column2     Column3
======          ======      ======
Mon Aug 24      Shift 1     Something about Shift1
                Shift 2     Something about Shift2
                Shift 3     Something about Shift3

...then adding some more info about Shift1 in Column3:

Column1         Column2     Column3
======          ======      ======
Mon Aug 24      Shift 1     Something about Shift1
                            More about Shift1
                            Yet more about Shift1
                Shift 2     Something about Shift2
                Shift 3     Something about Shift3

...I think you get the picture (both Column1 and Column2 grow vertically to keep pace with the verbiage about Shift1 from Column2 in Column3). Then, the same would happen if verbiage was added in Column3 related to Shift2:

Column1         Column2     Column3
======          ======      ======
Mon Aug 24      Shift 1     Something about Shift1
                            More about Shift1
                            Yet more about Shift1
                Shift 2     Something about Shift2
                            More about Shift2
                Shift 3     Something about Shift3

So, I was thinking I could accomplish it this way: When programmatically adding a Row inside Column2 (such as "Shift2" or "Shift3" up to "ShiftN"), also add a row to Column1 (in my scenario, when adding a row (another Shift) to Column2, add a "blank" row to Column1 to keep them the same height).

But then it gets more complicated: When adding a row to Column3 about Shift1, also add rows to both Column1 and Column2 just prior to the "Shift2" row or append to the end if "Shift1" is the only one.

So my question is: How can I programmatically (in JavaScript) add "sub-divs" to divs (pseudo/CSS rows inside pseudo/CSS columns)?

Answer 1

Just make sure that when you append a new div.row into div.container, the div.row has three div.column children, even if some of the div.column elements are empty:

//Our container:
var container = document.querySelector("div.container");

function insertRow(index, columns) {
    /**
     * This is a function that inserts a div.row before the (index)th child of div.container. Note that the (index)th child is counted using zero-based indexing.
     * If index is null, we simply append the row to the end.
     * Note that the div.row has three div.column children, each with textContent of columns[0], columns[1], and columns[2] (which may be blank if necessary).
    */
    //Create the div.row:
    var row = document.createElement("div");
    row.classList.add("row");
    //Append the three div.column children:
    for (var i = 0; i < 3; i++) {
        var column = document.createElement("div");
        column.classList.add("column");
        column.textContent = columns[i];
        //Append the column into row:
        row.appendChild(column);
    }
    //If index is null, append row into container:
    if (index === null) {
        container.appendChild(row);
    }
    //Otherwise, insert row before container's (index)th child:
    else {
        //container's children:
        var children = document.querySelectorAll("div.container div.row");
        container.insertBefore(row, children[index]);
    }
}

//Insert a new row to the end:
insertRow(null, ["", "Hi!", "I'm friendly!"]);
//We can also insert something in the middle:
insertRow(2, ["", "", "I'm a cool person!"]);

/* Give each cell some space and a border so this is more readable: */
.container {
  display: table;
  border-spacing: 10px;
}
.row {
  display: table-row;
}
.column {
  display: table-cell;
  padding: 5px;
  border: 1px solid black;
}

<div class="container">
    <div class="row" id="row1">
        <div class="column" id="row1Col1">Column 1</div>
        <div class="column" id="row1Col2">Column 2</div>
        <div class="column" id="row1Col3">Column 3</div>
    </div>
    <div class="row" id="row2">
        <div class="column" id="row2Col1">Date goes here</div>
        <div class="column" id="row2Col2">Shift1</div>
        <div class="column"  id="row2Col3"></div>
    </div>
</div>