javascript getElementById appendChild error

Question

i am having a problem with javascript and i dont know how to solve it. i am having this code

function addtask(tab){
        var tasktag = document.createElement('tr');
        var task = document.getElementById(tab).getElementsByTagName('tr').length+1;
        task = tab+'r'+task;
        tasktag.setAttribute('id',task);
        document.getElementById(tab).appendChild(tasktag);
        var tasktag2 = document.createElement('td');
        var task2 = document.getElementById(task).getElementsByTagName('td').length+1;
        task2 = task+'c'+task2;
                alert(task2);
        tasktag2.setAttribute('id',task2);
        tasktag2.innerHTML =''+task2+'   <br><input id=\'btn1\' type=\'button\' value=\'remove\' onClick=\"removeElement(\''+num+'\',\'body\')\" />';
        document.getElementById(task).appendChild(task2);
}`

i get "Couldn't convert JavaScript argument arg 0 [nsIDOMHTMLTableRowElement.appendChild]"(from firebug). while this code works perfect

`var num;
function addlist(){
        var divTag = document.createElement('table');
        if(num==undefined){num = 1;}
        else{numi = num.split("t")
            num=parseInt(numi[1])+1;}
        num = 't'+num;
        divTag.setAttribute('id',num);
        divTag.setAttribute('align','left'); 
        divTag.setAttribute('style','margin:7px;'); 
        divTag.setAttribute('border',1); 
        document.body.appendChild(divTag);
        var divTag2 = document.createElement('tr');
        var num2 = document.getElementById(num).getElementsByTagName('tr').length+1;
        num2 = num+'r'+num2;
        divTag2.setAttribute('id',num2);
        document.getElementById(num).appendChild(divTag2);
        var divTag3 = document.createElement('td');
        var num3 = document.getElementById(num2).getElementsByTagName('td').length+1;
        num3 = num2+'c'+num3;
        divTag3.setAttribute('id',num3);
        divTag3.innerHTML =''+num+'   <br><input id=\'btn1\' type=\'button\' value=\'remove\' onClick=\"removeElement(\''+num+'\',\'body\')\" /><br><input id=\'btn2\' type=\'button\' value=\'task\' onClick=\"addtask(\''+num+'\')\" />';
        document.getElementById(num2).appendChild(divTag3);
    }

why is this happening?thank you all for your time

Answer 1

When working with tables, you have to use slightly different JavaScript functions:

var row = table.insertRow(table.rows.length);
row.id = ...;

Try re-working your code to use insertRow instead of appendChild, as I am lazy.