Javascript Img Table Creation Issue

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, он будет удален из старого местоположения и добавлен в новое место, поэтому вы увидите тот же экземпляр изображения, перемещающийся (точнее, вы просто видите его в его конечное место в соответствии с петлей).

Вам необходимо создать новый экземпляр правильного изображения для каждой итерации цикла и добавить его.