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?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- 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
    var row = document.createElement("TR")
    var td1 = document.createElement("TD")
    var td2 = document.createElement("TD")
    td2.appendChild (document.createTextNode(col2))
//  End -->
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

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

<table id="myTable" cellspacing="0" border="1">