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

Question

当我尝试使用以下代码时，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 =只是输出我的表中的文本形式的安慰，而不是写我的表页面？

Answer 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>";