Need help fixing my Conway Game of Life code

Question

I am making a Conway Game of Life that it starts with a predefined board, I made that board through an two dimensional Array, have implemented the rules and they seem to be working, the problem is that the different generations just appear next to previous one without replacing it (see image [1])

image: [![enter image description here][1]][1]

So, what i needed is to make the following generations replace the previous ones on the HTML display.

var gfg=new Array(10);

for (var COL=0; COL<gfg.length;COL++){
    gfg[COL]=new Array(10);   
}

run();

function run(){  
    board1();
    rules();    
}

function rules(){
        for (var i=0; i<10;i++){
            for(var j=0; j<10; j++){
                const cell = gfg[i][j];
                let numNeighbours = 0;
                for (let x = -1; x < 2; x++) {
                    for (let y = -1; y < 2; y++) {
                        if (x === 0 && y === 0) {
                            continue;
                        }
                    var x_cell = i + x;
                    var y_cell = j + y;

                 if (x_cell > 0 && y_cell > 0 && x_cell <0 && y_cell <0) {
                            const currentNeighbour = 1;
                            numNeighbours=numNeighbours+currentNeighbour;
                        }
                    }                  
                }
                if (cell === 1 && numNeighbours < 2) {
                    gfg[i][j] = 0;
                } else if (cell === 1 && numNeighbours > 3) {
                    gfg[i][j] = 0;
                } else if (cell === 0 && numNeighbours === 3) {
                    gfg[i][j] = 1;
                }                         
            } 
        draw();

       }
    } 

function draw(){          
        for (var i=0; i<10;i++){
            for(var j=0; j<10; j++){                                
                //Writes in HTML according to the coordinate value
                if(gfg[i][j]===0){
                    document.write("&#9723;");
                }else if(gfg[i][j]===1){
                    document.write("&#9724;");
                }                              
            }
        document.write("<br>");      
        }

}
//predefined board
function board1() {
    gfg[0][0] = 1;
    gfg[0][1] = 0;
    gfg[0][2] = 1;
    gfg[0][3] = 0;
    gfg[0][4] = 0;
    gfg[0][5] = 1;
    gfg[0][6] = 0;
    gfg[0][7] = 0;
    gfg[0][8] = 0;
    gfg[0][9] = 1;
    gfg[1][0] = 0;
    gfg[1][1] = 0;
    gfg[1][2] = 0;
    gfg[1][3] = 0;
    gfg[1][4] = 0;
    gfg[1][5] = 0;
    gfg[1][6] = 0;
    gfg[1][7] = 1;
    gfg[1][8] = 0;
    gfg[1][9] = 0;
    gfg[2][0] = 0;
    gfg[2][1] = 0;
    gfg[2][2] = 0;
    gfg[2][3] = 1;
    gfg[2][4] = 0;
    gfg[2][5] = 1;
    gfg[2][6] = 1;
    gfg[2][7] = 0;
    gfg[2][8] = 0;
    gfg[2][9] = 0;
    gfg[3][0] = 0;
    gfg[3][1] = 0;
    gfg[3][2] = 1;
    gfg[3][3] = 0;
    gfg[3][4] = 1;
    gfg[3][5] = 0;
    gfg[3][6] = 0;
    gfg[3][7] = 0;
    gfg[3][8] = 0;
    gfg[3][9] = 1;
    gfg[4][0] = 0;
    gfg[4][1] = 0;
    gfg[4][2] = 0;
    gfg[4][3] = 0;
    gfg[4][4] = 1;
    gfg[4][5] = 0;
    gfg[4][6] = 0;
    gfg[4][7] = 0;
    gfg[4][8] = 0;
    gfg[4][9] = 0;
    gfg[5][0] = 0;
    gfg[5][1] = 1;
    gfg[5][2] = 0;
    gfg[5][3] = 0;
    gfg[5][4] = 0;
    gfg[5][5] = 0;
    gfg[5][6] = 0;
    gfg[5][7] = 0;
    gfg[5][8] = 0;
    gfg[5][9] = 0;
    gfg[6][0] = 0;
    gfg[6][1] = 0;
    gfg[6][2] = 0;
    gfg[6][3] = 0;
    gfg[6][4] = 1;
    gfg[6][5] = 0;
    gfg[6][6] = 1;
    gfg[6][7] = 0;
    gfg[6][8] = 1;
    gfg[6][9] = 0;
    gfg[7][0] = 1;
    gfg[7][1] = 0;
    gfg[7][2] = 0;
    gfg[7][3] = 1;
    gfg[7][4] = 0;
    gfg[7][5] = 0;
    gfg[7][6] = 0;
    gfg[7][7] = 1;
    gfg[7][8] = 0;
    gfg[7][9] = 0;
    gfg[8][0] = 0;
    gfg[8][1] = 0;
    gfg[8][2] = 1;
    gfg[8][3] = 0;
    gfg[8][4] = 1;
    gfg[8][5] = 0;
    gfg[8][6] = 0;
    gfg[8][7] = 0;
    gfg[8][8] = 0;
    gfg[8][9] = 0;
    gfg[9][0] = 0;
    gfg[9][1] = 1;
    gfg[9][2] = 0;
    gfg[9][3] = 0;
    gfg[9][4] = 0;
    gfg[9][5] = 0;
    gfg[9][6] = 0;
    gfg[9][7] = 0;
    gfg[9][8] = 1;
    gfg[9][9] = 0;

}



  [1]: https://i.stack.imgur.com/ZKrFj.png

Answer 1

this is if you are using document.write() All you will have to do is clear the container of the previous write with document.body.innerHTML = ""; this will clear your previous writes and then you can go through the loop again.

If you need to use html and javascript only canvas will still work as it is a built in html tag. However if you still wish to proceed with using html to display your cells then create a new div tag and give it an id eg: id="life_container" then grab a reference to this tag when the page finishes loading and on every frame empty the div then go through your loop and fill it with your elements.

var container;
document.onload = function() {
   container = document.getElementById('life_container');
}

// clear container
container.innerHtml = "";

// fill container
container.innerHtml += gfg[i][j] === 0 ? "◻" : "◼";

However I might suggest some improvements by using canvas instead of html to display your game of life. You can use P5 library , to run your loop and display it. You will need to add in extra calculation to figure out "where" to draw your cell on canvas but not much more.