create a nested table with javascript

Question

hi

my html form contains a table tag <table id="MyTable"> .

i would like to populate this table using a javascript function.
my probllem is that i created a table that contains another table inside on of the tags. i tried to write the most basic code:

var myTable = document.createElement('tbody');
  var row1 = document.createElement('tr');
   var col1 = document.createElement('td');
    var but1 = document.createElement('input');   
        but1.setAttribute('type','button') ;
        but1.setAttribute('value','button1');

      col1.appendChild(but1);
    row1.appendChild(col1);
  myTable.appendChild(row1);

var row2 = document.createElement('tr');
  var col2 = document.createElement('td');
    var nestedTbl = document.createElement('tbody');
      var row3 = document.createElement('tr');
        var col3 = document.createElement('td');
         var but2 = document.createElement('input');
             but2.setAttribute('type','button');
             but2.setAttribute('value','button2');

            col3.appendChild(but2);
            row3.appendChild(col3);
         nestedTbl.appendChild(row3);

     col2.appendChild(nestedTbl);
   row2.appendChild(col2);
  myTable.appendChild(row2);

MainTable.appendChild(myTable);

when i run the javascript function it creates the table 'MyTable' and shows the first button but ignores completely from the inner table.

is there a way to achieve my goal ?