DOM Manipulation In Tables

I was playing around with DOM manipulations in html tables and i wanted to add and remove table rows dynamically. In the end with the help of W3C school i was able to come up with a solution. Below is what i came up with in the end.

                var msgDetailsTable = document.getElementById("msgTable");
                msgDetailsTable.deleteRow(1);
                var x = msgDetailsTable.insertRow(1);
                var y=x.insertCell(0);
                var z=x.insertCell(1);
                y.width="20%";
                z.width="80%"
                y.innerHTML="<font>    Line  :</font>";
                z.innerHTML="<textarea rows='4' cols='100' id='msgTxtArea' name='msgTxtArea' readonly='readonly'></textarea>";

This deletes the second row and then adds two new different <td> elements setting its widths as appropriate. This will work on Fire fox 1.5+ and all IE browsers.