for 循环中的 appendChild 仅添加 1 个孩子

Posted 2023-05-09

【中文标题】for 循环中的 appendChild 仅添加 1 个孩子

【英文标题】：appendChild in for loop only adds 1 child

【发布时间】：2012-09-25 16:46:50

【问题描述】：

在 javascript 中，我正在使用 html 表格创建一个网格（您在 Photoshop 中看到的网格类型）。网格大小将是可变的，即可由用户更改，因此必须计算每个网格正方形的大小并除以可用像素数以获得精确大小的网格。

我已经完成了所有这些，但是在添加必要的表格元素来创建网格时遇到了问题。我的代码处于完整的工作状态，除非我在 for 循环中使用 appendChild() 函数，它只附加一个子级，而它应该附加到几百个。

我的代码：

grid.show = function(event)

    var e = event;

    if(grid.show_grid == false)
    
        grid.show_grid = true;

        parent.document.getElementById("grid_table").style.display = "block";

        // Get grid (table) and create some elements.
        grid.get_grid = parent.document.getElementById("grid_table");
        grid.tr       = parent.document.createElement("tr");
        grid.td       = parent.document.createElement("td");

        // Clear the grid of all squares so we don't have to worry about subtracting anything.
        grid.get_grid.innerHTML = "";

        // Calculate the number of horizontal and vertical squares.
        var horizontal = Math.ceil(grid.total_width / grid.size);
        var vertical   = Math.ceil(grid.total_height / grid.size);

        // This was a nested loop, removed for demonstration.
        // Attempting to add 10 "<tr><td></td></tr>" to the table.
        for(var j = 0; j < 10; j++)
        
            grid.tr.appendChild(grid.td);
        

        //console.log(grid.tr);

        // Add the elements to the table.
        grid.get_grid.appendChild(grid.tr);

    
    else
       
        grid.show_grid = false;
        parent.document.getElementById("grid_table").style.display = "none";
    

这只会返回一个包含单个表数据的表行，如下所示：

<tr>
    <td></td>
</tr>

我已经看过 this page 和 this page，它们听起来很有希望，但我就是不知道如何实现这一目标。

编辑：代码现在可以运行，解决方案：

grid.show = function(event)

    var e = event;

    if(grid.show_grid == false)
    
        grid.show_grid = true;

        parent.document.getElementById("grid_table").style.display = "block";

        grid.get_grid           = parent.document.getElementById("grid_table");
        grid.tr                 = null;
        grid.td                 = null;
        grid.get_grid.innerHTML = "";

        var horizontal = Math.ceil(grid.total_width / grid.size);
        var vertical   = Math.ceil(grid.total_height / grid.size);

        for(var i = 0; i < vertical; i++)
        
            grid.tr = parent.document.createElement("tr");

            for(var j = 0; j < horizontal; j++)
            
                grid.td = parent.document.createElement("td");

                grid.td.width = grid.size;
                grid.td.height = grid.size;

                grid.tr.appendChild(grid.td);
            
            grid.get_grid.appendChild(grid.tr);
        
    
    else
       
        grid.show_grid = false;
        parent.document.getElementById("grid_table").style.display = "none";
    

【参考方案1】：

您一遍又一遍地附加相同的元素。每次您想拥有一个新元素时，都需要致电document.createElement。

编辑：如果元素设置非常复杂并且可能包含子元素，那么您也可以使用Node.cloneNode

【讨论】：

谢谢，这就是问题所在。代码现在按预期工作（OP 中的解决方案）。

【参考方案2】：

如果你想复制一个元素，你需要克隆它。使用cloneNode()

所以改变

grid.tr.appendChild(grid.td);

到

grid.tr.appendChild(grid.td.cloneNode(true));

【参考方案3】：

for(var j = 0; j < 10; j++)

        grid.tr.appendChild(grid.td);

应该是

for(var j = 0; j < 10; j++) 
    var newTd = parent.document.createElement('td');
    grid.tds.push(newTd); // if you need it, not sure why though
    grid.tr.appendChild(newTd);