Question

在课堂上工作，我遇到了一个问题。我调试了这个问题，但我不确定它为什么会发生。这个问题似乎只是在创建表的过程中一直限制img显示为两个。即

<tr><td>img</td><td>img2</td></tr>
<tr><td></td><td>img2</td><td>img</td></tr>

删除第一个img并将其附加到创建的单元格。对不起，如果我没有任何意义，我将提供一段代码。

var ImgSrcB = document.createElement("img");
ImgSrcB.src = "Black.png";
var ImgSrcW = document.createElement("img");
ImgSrcW.src = "White.png";
var body = document.body, tbl = document.createElement('table');
tbl.style.width = 50*8;
tbl.style.height = 50*8;
for (var i = 0; i < 8;i++) {
    var tr = tbl.insertRow();
    var td;
    for (var j = 0; j < 8; j++) {
        if (i%2 == 0) {
            if (j % 2 == 0) {
                td = tr.insertCell();
                td.appendChild(ImgSrcB);
            }
            else if (j %2 == 1) {
                td = tr.insertCell();
                td.appendChild(ImgSrcW);
            }
        }
        else if (i % 2 == 1) {
            if (j % 2 == 0) {
                td = tr.insertCell();
                td.appendChild(ImgSrcW);
            }
            else if ( j % 2 == 1 ) {
                td = tr.insertCell();
                td.appendChild(ImgSrcB);
            }
        }
        console.log(i, j); //Debug Purposes
    }
}
body.appendChild(tbl);

知道为什么会这样吗？我对appendChild有错误的理解吗？

Answer 1

您创建一个图像，然后将其附加到任何地方。当您附加已在DOM上找到的DOM节点时，它将从旧位置移除，并附加到新位置，因此您看到相同的图像实例移动（或者更确切地说，您只是看到它根据循环的最终位置。

您需要为循环的每次迭代创建正确图像的新实例，并附加该实例。

Javascript Img表创建问题

1 个答案: