JavaScript destroys all children after I append a break? -

i'm creating script takes 2 input dimensions, width, , height, , creates scaled grid representative of how many blocks fit in box given dimensions following function:

function makerow() {         (var = 1; <= blockstall; i++) {             var mb = document.createelement("div");             mb.setattribute("class", "matrix-block mb-off");             mb.setattribute("onclick", "select_mb('" + j + "," + + "');");             placeblocks.appendchild(mb);             if (i = blockswide) {                 placeblocks.appendchild('br');             }         }     } 

this function works fine display first row of blocks, , inserts break tag after row has finished being rendered, want do. problem need generate 17 more rows, same number of blocks, each 1 under previous row, first thought was, i'll wrap loop around first loop , since there break there, render new row below previous one:

for (var j = 1; j <= blockstall; j++) { // vertical loop.      (var = 1; <= blockswide; i++) { // horizontal loop.         var mb = document.createelement("div");         //mb.setattribute("id", "matblock-" + + "-" + j);         mb.setattribute("class", "matrix-block mb-off");         mb.setattribute("onclick", "select_mb('" + + "," + j + "');");         placeblocks.appendchild(mb);     }      if (j = blockswide) {         placeblocks.appendchild(brk);     }  } 

where blockswide = 17. here fiddle complete script. when log value j in console, in fact increment (which tells me loop working). seems happening though is reason rendering row, , either rendering new row on top of (seems unlikely since break tag rendered after each row completes) or, reason children destroyed each time new "horizontal" loop run.

does know why might happening , how each row appended under last row produces grid of blocks instead of 1 row?

thanks in advance, appreciated.

so, i'm bit confused aspects of script, think have 2 major issues.

firstly, ever call document.createelement("br") once, means ever create single line-break; , single line-break can appear in 1 place in dom. this:

        placeblocks.appendchild(brk); 

removes brk current position in dom , puts @ end of placeblocks. should change this:

        placeblocks.appendchild(document.createelement("br")); 

secondly, don't think if (j = blockswide) { makes sense. note it's equivalent this:

j = blockswide; if (blockswide != 0) { 

which means interferes for-loop manipulating value of j. think fix issue remove whole if-check, , perform body unconditionally.