Problem with adding fields on fly in IE7

[zzyzx]

Hi there,

Could anybody tell me why this doesn't work on IE7, which works perfectly on firefox, thanks very much!

David

<script language="javascript">
<!--
var counter = 0;
function addMore()
{
var row = document.createElement("tr");
var cellRadio = document.createElement("td");
var cellRadioText = document.createElement("td");
//radio button name
var radioText = document.createTextNode("HlPointName:");
var newRadio = document.createElement("input");
var newRadioText = document.createTextNode("HIGH");
newRadio.type = "radio";
newRadio.name = "Name" + "_" + counter;
newRadio.value = "HIGH";
var newRadioLow = document.createElement("input");
var newRadioLowText = document.createTextNode("LOW");
newRadioLow.type = "radio";
newRadioLow.name = "Name" + "_" + counter;
newRadioLow.value = "LOW";

cellRadioText.appendChild(radioText);
cellRadio.appendChild(newRadio);
cellRadio.appendChild(newRadioText);
cellRadio.appendChild(newRadioLow);
cellRadio.appendChild(newRadioLowText);
row.appendChild(cellRadioText);
row.appendChild(cellRadio);

var cellInput = document.createElement("td");
var cellInputText = document.createElement("td");
var inputText = document.createTextNode("Value");
var newInput = document.createElement("input");
newInput.type = "text";
newInput.name = "Value" + "_" + counter;
alert('newInput.name: ' + newInput.name);
cellInputText.appendChild(inputText);
cellInput.appendChild(newInput);
row.appendChild(cellInputText);
row.appendChild(cellInput);

var newDiv = document.createElement("div");
newDiv.appendChild(row);
var targetDiv = document.getElementById("targetPoint");
targetDiv.appendChild(newDiv);
counter++;
}
//-->
</script>
HTML:
<tr>
<td>
<input id="button" value="Click to add more" onclick="addMore()" type="button">
</td>
</tr>
<tr>
<td>
<table>
<tbody><tr><td>
<div id="targetPoint"></div>
</td></tr></tbody>
</table>
</td>
</tr>

[Kravvitz]

Why are you trying to append a table row to a <div>?

Could you be more specific about what doesn't work?

The language attribute is deprecated use type="text/javascript" instead of language="javascript".

P.S. Please read Guidelines and Suggestions for Posting on Web Development Forums.

[Pepejeria]

As Kravvitz says, you are creating invalid HTML.

type="text/javascript" is obsolete and browsers actually ignore it (its like having no type set at all). Same goes for JavaScript includes, the mime-type will be determined on the server settings.

Correct would be application/javascript or application/ecmascript, but IE will then not trigger the JavaScript...

See the following url for more info on this or see the first part of these movies.

[Kravvitz]

Yes, but the type attribute is required and IE is rather picky, so we are stuck.

Do you know the reasoning behind changing it from a sub-type of text to a sub-type of application? Is it related to XML doing the same thing with its mime-type?

[jimfraser]

You should try appending the new <tr> to the existing <tbody> element.

[Pepejeria]

Do you know the reasoning behind changing it from a sub-type of text to a sub-type of application? Is it related to XML doing the same thing with its mime-type?

Interesting question. Point 3 here mentions this, but an explanation can be found here (second page of that thread has a good explanation).