innerHTML = varはページの代わりにコンソールに書き込み

Question

innerHTMLは次のコードを使用しようとすると、ページ本文をmyTableに置き換えるのではなく、開発コンソールに書き込みます。

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

myTableは、表形式の一連のテキスト項目です。私はjQueryを使用しようとしました

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

しかし、私は複雑なためにこれをJavaScriptで排他的に実行しようとしています。以下

全コード：.innerHTMLは=単に代わりのページに私のテーブルを書き込むので、コンソールにテキスト形式で私のテーブルを出力する理由

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; 

は誰も教えてもらえますか？

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