JavaScript Img Table Creation Issue

Question

Praca nad moim projektem dla klasy i napotkałem problem. Debugowałem problem, ale nie jestem pewien, dlaczego tak się dzieje. Wydaje się, że problem ogranicza tylko pokazany img do dwóch przez cały czas podczas tworzenia tabeli. tj

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

Usuwa pierwszy img i dołączyć go do utworzonej komórki. Przepraszam, jeśli nie mam żadnego sensu, podam fragment kodu.

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); 

Każdy pomysł, dlaczego tak się dzieje? Czy mam błędne zrozumienie w appendChild?

Answer 1

Tworzysz jedno zdjęcie, a następnie dołączasz je wszędzie. Po dołączeniu węzła DOM, który został już znaleziony w DOM, zostanie on usunięty ze starej lokalizacji i dołączony do nowej lokalizacji, dlatego widzisz poruszające się to samo wystąpienie obrazu (a raczej po prostu widzisz to w jego ostatnie miejsce zgodnie z pętlą).

Należy utworzyć nową instancję poprawnego obrazu dla każdej iteracji pętli i dołączyć ją.