如何以编程方式（在 JavaScript 中）将“子 div”添加到 div？

Question

我有一个相关的/初步的问题here。

以下 CSS 和 HTML 改编自 here，我认为这是一个好的开始，或者至少很有趣：

CSS

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

HTML

注意：我已经添加了 ID

<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>

但是我需要动态添加到此，以便每个 Column1 始终保持与相应的 Column2 一样“高”，因为将行添加到 Column2 并且当行添加到 Column3 时，Column2 的第一行（Shift ，如“Shift 1”）与它保持垂直同步。所以你会有这样的东西：

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      

为了尽可能清楚，我将展示在进行任何程序化添加之前的外观：

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

...然后在 Column2 中再添加两行（“Shift1”和“Shift2”），并在 Column3 中添加相关措辞：

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

...然后在 Column3 中添加更多关于 Shift1 的信息：

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

...我想你明白了（Column1 和 Column2 都垂直增长，以跟上 Column3 中 Column2 中关于 Shift1 的措辞）。那么，如果在与 Shift2 相关的 Column3 中添加了措辞，也会发生同样的情况：

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

所以，我想我可以通过这种方式完成它：当以编程方式在 Column2 中添加一行时（例如“Shift2”或“Shift3”到“ShiftN”），还要向 Column1 添加一行（在我的场景中，当向 Column2 添加一行（另一个 Shift）时，向 Column1 添加一个“空白”行以保持它们相同的高度）。

但是它变得更加复杂：当向 Column3 添加一行时关于 Shift1，还要在“Shift2”行之前向 Column1 和 Column2 添加行，或者如果“Shift1”则追加到末尾"是唯一的。

所以我的问题是：如何以编程方式（在 JavaScript 中）将“子 div”添加到 div（伪/CSS 列中的伪/CSS 行）？

Answer 1

只需确保当您将新的div.row 附加到div.container 时，div.row 有三个div.column 子元素，即使某些div.column 元素是空的：

//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>