为什么我不能添加到innerHTML？

Question

我有这个功能有效：

function createTableFor(pid, numCol, numRow) {
    var p5 = document.getElementById(pid);
    var html = '<table>';

    for(var i = 0; i < numRow; i++) {
      html += '<tr>';
      for(var j = 0; j < numCol; j++) {
        html += `<td id="${i}-${j}"></td>`;
      }
      html += '</tr>';
    }
    html += '</table>';

    p5.innerHTML += html;
  }

但之前，我没有使用字符串html创建我直接使用的html字符串p5.innerHTML：

  function createTableFor(pid, numCol, numRow) {
    var p5 = document.getElementById(pid);
    p5.innerHTML += '<table>';

    for(var i = 0; i < numRow; i++) {
      p5.innerHTML += '<tr>';
      for(var j = 0; j < numCol; j++) {
        p5.innerHTML += `<td id="${i}-${j}"></td>`;
      }
      p5.innerHTML += '</tr>';
    }
    p5.innerHTML += '</table>';
  }

哪个不起作用，只显示<table></table> HTML。

我想知道为什么在整个代码中没有使用p5.innerHTML工作，为什么我必须创建一个单独的HTML字符串并在最后将其附加到p5.innerHTML ？