javascript - 如何以编程方式(在 JavaScript 中)将 "sub-divs"添加到 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 添加一行时 about Shift1，还要将行添加到 Column1 和 Column2 就在“Shift2”行之前，或者如果“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>