Hi there!

I have a script like the one below to add rows dynamically into a table

When I try it out, it adds new rows but the form element (in this case text field) is returned as code instead of well-formed textbox. I am still a novice in JavaScript here and can't work out how to make this script return the form element as it should. Can someone help me please?

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function addRow(id){
  
	var col1 = "<input type=\"text\" name=\"email\" size=\"30\" maxlength=\"255\">";
	var col2 = "<input type=\"text\" name=\"name\" size=\"30\" maxlength=\"255\">"; 
  
    var tbody = document.getElementById
(id).getElementsByTagName("TBODY")[0];
    var row = document.createElement("TR")
    var td1 = document.createElement("TD")
    td1.appendChild(document.createTextNode(col1))
    var td2 = document.createElement("TD")
    td2.appendChild (document.createTextNode(col2))
    row.appendChild(td1);
    row.appendChild(td2);
    tbody.appendChild(row);
  }
//  End -->
</script>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<a href="javascript:addRow('myTable')">Add row</a>

<table id="myTable" cellspacing="0" border="1">
  <tbody>
    <tr>
      <td>row1_column1</td><td>row1_column1</td>
    </tr>
  </tbody>
</table>
</body>
</html>