JQuery .html（）方法和Javascript .innerHTML =“之間的區別 <div> Somediv </div> ”？

Question

我已經做了大量的谷歌搜索，並查看了“您可能不需要jquery”，但仍然無法弄清楚出了什么問題。

我有一個makeTable函數，該函數建立一個html元素字符串以形成一個表。 當我使用Jquery .html方法將輸出表附加到DOM時，該函數很好用。

這是函數：

function drawTable () {
  var outputString = '';
  for(var i = 1; i <= 12; i++ ){
    outputString += "<tr>";
    for(var j = 1; j <= 12; j++) {
       outputString += "<td>" + i * j + "</>";
    }
    outputString += "</tr>";
  }
  $("#output").html(outputString);
}

drawTable();

但是，當我不使用Jquery並更改$("#output").html(outputString); 到document.getElementById('output').innerHTML(outputString); 該表格未顯示在頁面上。 我只得到一行數字。 當我檢查元素時， <tr>和<td>元素根本沒有被渲染，我也不明白為什么。

我很困惑。 我應該如何用純JS呈現此表？ 我對innerHTML方法不了解什么？ 這些功能是相同的，我只是更改了將outputString附加到DOM的行，並且實際上不明白為什么當我嘗試在普通JS中進行渲染時無法正確呈現。 請賜教！

Answer 1

@Igor Raush的評論是正確的。 您在濫用innerHtml。 它不是采用參數的方法。 這是一個屬性，其值必須直接用等號設置。

用簡單的javascript：

document.getElementById("output").innerHtml = outputString;

在jQuery中：

$("#output").html(outputString);