Table structure within <span>

[admin]

I use the following code for adding more <INPUT> fields on a page when the user presses an Add button:

var iSubjects=1;

function addSubject() {
iSubjects += 1;
dyn.innerHTML += '<tr>' +
'<td>Subject:</td>' +
'<td><input type="text" size="28" name="txtSubject' + iSubjects + '"></td>' +
'<td>Grade obtained/ expected:</td>' +
'<td><input type="text" size="28" name="txtGrade' + iSubjects + '"></td>' +
'</tr>\n';
}

<table>
<tr>
<td>Subject:</td>
<td><input type="text" size="28" name="txtSubject1"></td>
<td>Grade obtained/ expected:</td>
<td><input type="text" size="28" name="txtSubGrade1"></td>
</tr>
<span id="dyn" style="position:relative;">
</span>
</table>

And this is how the page looks after several clicks of the Add Button:

Subject:[field] Grade obtained/ expected:[field]
Subject:[field] Grade obtained/ expected:[field] Subject:[Field] Grade obtained/ expected:[Field] Subject:[Field] Grade obtained/ expected: [Field]

The table structure and tags seem to be ignored. Does anyone know why this is happening?