“cannot call method 'appendchild' to null”…error…why?

Question

here is my code...

    var main = document.getElementById("section");  //gets node for main window
        var para1 = document.createElement("p");     //creates paragraph     node
        var para2 = document.createElement("p");    // creates another paragraph node

        var req = request.responseXML;   //gets xml data

        var nodeList = req.getElementsByTagName("line");   //gets all nodes with line as tag
        var nodeArray = new Array();   //holds only lines that are part of code

        para1.appendChild(document.createTextNode(req.getElementsByTagName("description")[0].childNodes[0].nodeValue));  //creates text node to put inside paragraph node
        para2.appendChild(document.createElement("table"));   //creates a table tag and puts inside para2

        for(var i=0; i<nodeList.length; i++)
        {
            if(nodeList[i].getAttribute("st") == "no")
            {
                document.getElementById("table").appendChild(document.createElement("tr"));  //creates a table row for each line participating in quiz
                //document.getElementById("tr").appendChild(document.createElement("td"));   //creates table data for the row (only one)dd
                //nodeArray.push(nodeList[i].childNodes[0].nodeValue);  //adds to array the lines participating in quiz         
                //document.getElementById("td").appendChild(createTextNode(nodeList[i],childNodes[0].nodeValue));
            }
        }


        main.appendChild(para1);   //add paragraph to the main div
        main.appendChild(para2);    //adds 2nd paragraph to main div
    }

So I have commented everything else out in the if statement but I'm still getting this error...if I already created the table tag earlier, why is it considered null??

Answer 1

Change your code to:

var table = para2.appendChild(document.createElement("table"));
var tbody = table.appendChild(document.createElement('tbody'));

now add rows to tbody . Other answers tell you about the getElementById error. The comment to your question tells you why to create a TBODY element.

Answer 2

You are not assigning an id of "table" to the table, so you won't find it through getElementById("table").

Either assign the appropriate id to the table or use getElementsByTagName.

Answer 3

para2.appendChild(document.createElement("table"));

This creates an element with name "table", not id "table"

In your if block, access it by using getElementsByName

Answer 4

You have several calls to appendChild , so it's difficult to validate that the error is happening on the 'table' line. But that said, you're calling document.getElementById , not document.getElementsByTagName which means you needed to create the table with an id table :

<table id="table">
...
</table>