javascript - JQuery .html() 方法和 Javascript .innerHTML = " somediv "之间的区别？

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