innerHTML = var 写入控制台而不是页面答案

【问题标题】：innerHTML = var writes to console instead of to pageinnerHTML = var 写入控制台而不是页面
【发布时间】：2017-08-15 20:53:30
【问题描述】：

当我尝试使用以下代码时，innerHTML 会写入开发控制台，而不是用 myTable 替换页面正文。

document.getElementsByClassName('body').innerHTML = myTable;

myTable 只是一系列格式化为表格的文本项。我尝试过使用 jQuery

$("body").html(myTable);

但是，由于复杂性，我尝试仅在 javascript 中执行此操作。

完整代码如下：

var titleArray = [];
var descArray = [];
var myTable = "<table><thead><tr><th>Index</th><th>Item Name</th>
<th>Description</th></tr></thead><tbody>";

var doc = top.frames['bsscright'].document;
titleArray = doc.getElementsByTagName('dt');
descArray = doc.getElementsByTagName('dd');

for (var i = 0; i < titleArray.length; i++) {
  myTable+="<tr><td>" + i + "</td>";
  myTable+="<td>" + titleArray[i].innerText + "</td>";
  myTable+="<td>" + descArray[i].innerText + "</td></tr>";
}

myTable+="</thead></table>";

document.getElementsByClassName('body').innerHTML = myTable;

谁能告诉我为什么 .innerHTML = 只是将我的表格以文本形式输出到控制台，而不是将我的表格写入页面？

【问题讨论】：

您确定要设置带有类正文的元素的 html，而不是文档的元素吗？您很可能在控制台中看到异常。试试 document.body.innerHTML = myTable
您真的是指 getElementsByClassName 还是 getElementsByTagName？或查看 Dimitri 评论。

标签： javascript html innerhtml

【解决方案1】：

改用querySelector 来获取第一个body 类，这似乎是您想要的。

document.querySelector('.body').innerHTML = myTable;

否则，您将设置返回集合的 .innerHTML 属性，而不是在特定元素上。

此外，您可以使用模板字符串来使这更好。

var doc = top.frames['bsscright'].document;
var titleArray = doc.getElementsByTagName('dt');
var descArray = doc.getElementsByTagName('dd');

var myTable = "<table><thead><tr><th>Index</th><th>Item Name</th>
<th>Description</th></tr></thead><tbody>";

for (var i = 0; i < titleArray.length; i++) {
  myTable += `<tr><td>${i}</td>
                  <td>${titleArray[i].textContent}</td>
                  <td>${descArray[i].textContent}</td></tr>`;
}

document.querySelector('.body').innerHTML = myTable+"</thead></table>";

【讨论】：

OP 甚至可能只想要querySelector('body')（没有类，因为谁将一个名为body 的类添加到？）
@Andy：是的。那里有些奇怪。如果是这样，document.body 也可以。