Javscript: Dynamic table creation and adding rows

See more:

Javascript

HTML

Javascript

var t="<table id='datatable'>";
        t+=" <tbody><tr><td>head1</td><td> head </td><td> head 1</td></tr>";
        t+="<tr><td>value from db</tr></td>";
        t+=" </tbody></table>";
        document.getElementById('invitee').innerHTML=t;//div tag

Above is my code to create a dynamic table by getting data from database

On clicking a button i need to add a new row to the above table

function addRow() {
            var table = document.getElementById('dataTable');
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
            var cell2 = row.insertCell(0);
            cell2.innerHTML = "SDGF";
            var cell3 = row.insertCell(1 );
            var element2 = document.createElement("input");
            element2.type = "button";
            element2.name = "delete";
            cell3.appendChild(element2);
        }

this is the method to add a row.
this method works fine while creating a static table in html but not for the above one.I am getting an error
"Uncaught TypeError: Cannot read property 'rows' of null "
Anybody please help me solve this issue.