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);