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