Javascript Img 表创建问题

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 节点时，它将从旧位置移除，并追加到新位置，因此您会看到相同的图像实例四处移动(或者更确切地说，您只是在它根据循环的最终位置)。

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