为什么它给错误“的appendChild为空”的错误，以及如何解决呢

Question

当我试图td元素追加到tr，它抛出一个错误：

cannot read property appendChild of null

这是我的代码：

var col = prompt('Enter the number of columns, table needs to have'); 
var row = prompt('Enter the number of rows, the table should have'); 

function columnCreator() { 
    var table = document.querySelector('tableDiv'); 
    var tableRow = document.createElement('tr'); 
    table.appendChild(tableRow); 

    for (var i = 0; i < col; i++) { 
     var tableData = document.createElement('td'); 
     tableRow.appendChild(tableData); 
     var dummyText = document.createTextNode('Table Data'); 
     tableData.appendChild(dummyText); 
    } 
} 

columnCreator(); 

Answer 1

因为您的table变量不是有效的DOMElement。

var table = document.querySelector('tableDiv');

这也许应该是document.querySelector('#tableDiv');如果tableDiv是一个id。

您可以在MDN Documentation中阅读有关document.querySelector功能的更多信息。

Answer 2

var table = document.querySelector('tableDiv'); 
console.log(table)//undefined 

即使世界没有像tableDiv，无论是它的一个ID，类或嵌套结构：

var table = 
    document.querySelector('#tableDiv') //id 
|| document.querySelector('.tableDiv') //class 
|| document.querySelector('table > div') //div inside table 
|| document.querySelector('div > table');//table inside div