オブジェクトを使用してテーブルを作成する

Question

私はテーブルを作成していますが、Javascriptのみを使用しています。私はすでにテーブルを作りましたが、それはコンソール上に正しく表示されますが、ページ上に表示することはできません。私はappendChild()とinsertBefore()を試しても動作せず、URLをクリック可能にすることもできません。ここで

は私のコードです：

var companies = [ 
    { 
     id: 1, 
     name: 'Google', 
     link: 'http://google.com/' 
    }, 
    { 
     id: 2, 
     name: 'Microsoft', 
     link: 'http://microsoft.com/' 
    }, 
    { 
     id: 3, 
     name: 'Apple', 
     link: 'http://apple.com' 
    } 
]; 



var tbl = document.createElement('table'); 
var input = document.getElementById('input'); 
var thead = document.createElement("thead"); 
var tbody = document.createElement("tbody"); 

var tr_head = document.createElement("tr"); 

var th_id = document.createElement("th"); 
var th_name = document.createElement("th"); 
var th_link = document.createElement("th"); 

th_id.textContent = "Id"; 
th_name.textContent = "Name"; 
th_link.textContent = "link"; 


tr_head.appendChild(th_id); 
tr_head.appendChild(th_name); 
tr_head.appendChild(th_link); 

thead.appendChild(tr_head); 

for(var i = 0; i < companies.length; i++) { 
    var tr_body = document.createElement("tr"); 

    var td_id = document.createElement("td"); 
    var td_name = document.createElement("td"); 
    var td_link = document.createElement("td"); 

    // var id = companies[i].id; 
    // var name = companies[i].name; 
    // var link = companies[i].link; 

    td_id.textContent = companies[i].id; 
    td_name.textContent = companies[i].name; 
    td_link.textContent = companies[i].link; 

    tr_body.appendChild(td_id); 
    tr_body.appendChild(td_name); 
    tr_body.appendChild(td_link); 

    tbody.appendChild(tr_body); 
} 

tbl.appendChild(thead); 
tbl.appendChild(tbody); 

console.log(tbl); 

// input.appendChild(tbl); 

Answer 1

あなたは、ドキュメントに出力を書き込みますか？そうでなければ、スクリプトに残っているだけです。このよう

：

document.body.appendChild(tbl); 

Answer 2

ない最良の方法、それは方法だ...

var input = document.getElementById("input"); 

var rows = ""; 

for(var i = 0; i < companies.length; i++) { 
    rows += "<tr><td>"+companies[i].id+"</td>" 
     + "<td><a href='"+companies[i].link+"'>"+companies[i].name+"</a></td></tr>" 
} 

var table = "<table>"+rows+"</table>"; 

input.innerHTML = table;