working on project class, , have came across issue. debugged issue, i'm unsure why happens. issue seem limit img showed 2 time during process of creating table. ie
<tr><td>img</td><td>img2</td></tr> <tr><td></td><td>img2</td><td>img</td></tr> it removes first img , append created cell. sorry if i'm not making sense, provide snippet of code.
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; (var = 0; < 8;i++) { var tr = tbl.insertrow(); var td; (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); any idea why happens? have wrong understanding on appendchild?
you create 1 image, , append everywhere. when append dom node that's found on dom, removed old location, , appended new location, hence you're seeing same instance of image moving around (or rather, see in final place according loop).
you need create new instance of correct image every iteration of loop, , append that.
