PDA

View Full Version : IE6 not displaying DOM created elements

rptodd1
10-24-2006, 02:33 AM
Hi,

I'm trying to set up an ajax app at work, but the IE6 won't display DOM objects my script is producing. Why won't the following code display in IE6 but works great in Firefox (several versions). Click the button and a Text node (Hello) and an input should appear. :mad: What's going on in IE?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<script language="JavaScript">
function createTD()
{
alert("createTD");
var myTR = document.createElement("tr");
var myFirstTD = document.createElement("td");
var myInput = document.createElement("input");
var left = document.getElementById("left");
var text = document.createTextNode("Hello");
myFirstTD.appendChild(myInput);
myTR.appendChild(myFirstTD);
left.appendChild(myTR);

}
</script>
</head>

<body>
<table id="layout"">
<tr>
<td>
<table id="left" align="left"></table>
</td>
<td>
<table id="center" align="center"></table>
</td>
<td>
<table id="right" align="right"></table>
</td>
</tr>

</table>
<form>
<input type="Button" onclick="createTD();" value="click me">
</form>
</table>


</body>
</html>
_Aerospace_Eng_
10-24-2006, 06:43 AM
IE requires you to create the tbody before you create any other elements.
<script type="text/javascript">
function createTD()
{
var myTbody = document.createElement("tbody");
var myTR = document.createElement("tr");
var myFirstTD = document.createElement("td");
var myInput = document.createElement("input");
var left1 = document.getElementById("left");
var text = document.createTextNode("Hello");
myFirstTD.appendChild(myInput);
myTR.appendChild(myFirstTD);
myTbody.appendChild(myTR);
left1.appendChild(myTbody);
}
</script>
Kor
10-24-2006, 10:00 AM
in fact, in javascript TBODY is always required, as it is always present, even it is not actually HTML written:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="txt/javascript">
<script type="text/javascript">
onload=function(){
alert(document.getElementById('tab').innerHTML)
}
</script>
</head>
<body>
<table id="tab">
<tr>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>
rptodd1
10-24-2006, 02:52 PM
Thanks guys