这里有一种用它填充表的方法。因为您有一个数据网格，所以这是理解它的一种可能方式。

let gameBoard = [
  ['a', 'b', 'c', 'd'],
  ['1', '2', '3', '4'],
  ['+', '*', '@', '&'],
  ['Z', 'Y', 'X', 'W']
];

function updateScreen() {
  let arr = [0, 1, 2, 3],
    table = document.querySelector('table');
  arr.forEach(x => {
    let row = table.insertRow();
    arr.forEach(y => row.insertCell(y).appendChild(document.createTextNode(gameBoard[x][y])))
  })
}

updateScreen();

.board {
  border-collapse : separate;
  border-spacing: 5px;
}

.board td {
  padding: 15px;
  border: 1px solid #ccc;
  text-align:center;
  background:#f0f0f0;
  border-radius:4px;
  vertical-align:middle;
}

<table class='board'></table>

下面是一个与您的使用相匹配的解决方案 span s、 并利用 DocumentFragment 对象，以减少回流次数。

<div id="gameBoard"></div>
<script>
    var gameBoard = [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0]]
    function updateScreen()
    {
        let rows = gameBoard.length;
        let cols = gameBoard[0].length; // assumes at least the 0th index is set
        let fragment = new DocumentFragment();
        let linebreak = document.createElement('br');

        for(let i = 0; i < rows; i++)
        {
            for(let j = 0; j < cols; j++)
            {
                let cell = document.createElement('span');
                    cell.innerText = gameBoard[i][j];
                fragment.append(cell, "&nbsp;");
            }

            fragment.append(linebreak.cloneNode(), linebreak.cloneNode());
        }

        document.getElementById('gameBoard').appendChild(fragment);
    }
</script>

附加到正文的innerhtml：

function updateScreen(){
    for(var i=0; i<4; i++){
        for(var j=0; j<4; j++){
            document.body.innerHTML+='<span>' + gameBoard[i][j] + '&emsp;</span>';
        }
        document.body.innerHTML+="<br><br>";
    }
}

javascript创建输出的方法还有很多。
document.write（）删除以前的所有内容。有一个更好的办法：

<div id="here"></div>

<script>
    document.getElementById("here").innerHTML = "hey I am a cool text";
</script>

更多信息：https://www.w3schools.com/js/js_output.asp