When I was working on my college project, I wanted to add textfields on click of a button, at first, I used innerHTML=”…” for doing that, but it didn’t work and I did it like this(credits to Ashish Shukla ):
<html>
<head>
<script type="text/javascript">
var i = 3;
function addField(tableid)
{
var row = document.createElement("tr");
var col1 = document.createElement("td");
var col2 = document.createElement("td");
var input = document.createElement("input");
input.setAttribute("type","text");
input.setAttribute("name","field" + i );
col1.appendChild(document.createTextNode("Field" + i));
col2.appendChild(input);
row.appendChild(col1);
row.appendChild(col2);
var table = document.getElementById(tableid);
table.appendChild(row);
i++;
}
</script>
</head>
<body>
<form name="myform" action="myfile.php" method="post" id="myform">
<table id="fieldTable">
<tr><td>Field1 : </td><td><input type="text" name="field1" /></td></tr>
<tr><td>Field2 : </td><td><input type="text" name="field2" /></td></tr>
</table>
<table>
<tr><td><input type="button" value="Add field" id="button" onclick="addField('fieldTable')" /></td>
<td><input type="submit"/></td></tr>
</table
</form>
</body>
</html>
Upasana's blog :) 