appendChild in for loop only adds 1 child

Question

In JavaScript I am creating a grid (the type of grid you see in Photoshop) with HTML tables. The grid size is going to be variable, i.e., changeable by the user, so the size

Answer 1

If you want to make one copy of the element, you will need to clone it. Use cloneNode()

So change

grid.tr.appendChild(grid.td);

to

grid.tr.appendChild(grid.td.cloneNode(true));

Answer 2

for(var j = 0; j < 10; j++)
{
        grid.tr.appendChild(grid.td);
}

should be

for(var j = 0; j < 10; j++) {
    var newTd = parent.document.createElement('td');
    grid.tds.push(newTd); // if you need it, not sure why though
    grid.tr.appendChild(newTd);
}

Answer 3

You are appending the same element over and over. You need to call document.createElement each time you wish to have a new element.