无法调用方法appendChild为null

Question

It occurs in this:

for(var i = 0; i<phoneNums.length; i++)
{
    var lines = document.createElement('tr');
    var number = document.createElement('td');
    number.innerHTML = phoneNums[i];
    var minutes = document.createElement('td');
    minutes.innerHTML = minutesUsed[i];
    var plan = document.createElement('td');
    plan.innerHTML = plans[i];
    var charges = document.createElement('td');
    charges.innerHTML = charge[i];
    document.getElementById('theTable').appendChild(lines);
    lines.appendChild(number);
    lines.appendChild(minutes);
    lines.appendChild(plan);
    lines.appendChild(charges);
}

---

Specifically at:

document.getElementById('theTable').appendChild(lines);

<table id = 'theTable'>
        </table>
        <script type = 'text/javascript'>
            populateTable();
        </script>

I'm trying to create a function that adds tr and td and the values to a table.

Answer 1

You probably are running this script before "theTable" exists in your document. Make sure that this script occurs below your table with id="theTable" , or that it is run in an event handler that occurs after the table exists.

Answer 2

This means that you do not have an element in your DOM with an id of "theTable". Somewhere in your html you should have something like:

<table id="theTable">...

Alternatively, as others have also mentioned, this element may not have been loaded into the DOM before your script executes.