How to update the checkerboard without reloading the page?

Question

JavaScript

Good afternoon, I need help from those who understand js, I myself am not strong in it.
I'm trying to write a game like online checkers / chess, I took one of the options found on the Internet as a js code sample.
There is an array of fields:

var board;
Board(1,0,1,0,1,0,1,0,0,1,0,1,0,1,0,1,1,0,1,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,-1,0,-1,0,-1,0,-1,-1,0,-1,0,-1,0,-1,0,0,-1,0,-1,0,-1,0,-1);

The page is rendered like this:

var square_dim = 45;
document.write("<table border=0 cellspacing=0 cellpadding=0 width="+(square_dim*8+8)
+"<tr><td><img src='black.gif' width="+(square_dim*8+8)
+" height=4><br></td></tr>");
for(var j=0;j<8;j++) {
document.write("<tr><td><img src='black.gif' width=4 height="+square_dim+">");
for(var i=0;i<8;i++) {
if (moveable_space(i,j))
document.write("<a href='javascript:clicked("+i+","+j+")'>");
document.write("<img src='");
if (board[i][j]==1) document.write("you1.gif");
else if (board[i][j]==-1) document.write("me1.gif");
else if (moveable_space(i,j)) document.write("gray.gif");
else document.write("black.gif");
document.write("' width="+square_dim+" height="+square_dim
+" name='space"+i+""+j+"' border=0>");
if (moveable_space(i,j)) document.write("</a>");}
document.write("<img src='black.gif' width=4 height="+square_dim+"></td></tr>");}
document.write("<tr><td><img src='black.gif' width="+(square_dim*8+8)
+" height=4><br></td></tr></table><br>"

The clicked function gets the coordinates of the cell.
The coordinates are sent to the server via a websocket, the browser receives a new board array.
Actually, the question is - how can you "redraw" the board using a new array?
document.write will rewrite the page, innerHTML - I don't know how to get exactly the elements I need.

Answer 1

Well, I finally decided by assigning id to cells and getElementById + innerHTML )