在课堂上工作,我遇到了一个问题.我调试了这个问题,但我不确定它为什么会发生.这个问题似乎只是在创建表的过程中一直限制img显示为两个.即
它删除第一个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有错误的理解吗？
最佳答案
您创建一个图像,然后将其附加到任何地方.当您附加已在DOM上找到的DOM节点时,它将从旧位置移除,并附加到新位置,因此您看到相同的图像实例移动(或者更确切地说,您只是看到它根据循环的最终位置).
原文链接：https://www.f2er.com/html/426129.html您需要为循环的每次迭代创建正确图像的新实例,并附加该实例.
