If you open this HTML in Firefox 3.6.3 (confirmed in some earlier versions too), and click the drawStuff() link repeatedly, it doesn't render the contents of the last div consistently. Looking more closely it seems like it's rendering select fields with height=0. Any idea why this would happen?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> A Page </title>
<script type="text/javascript">
var num_select_options = 800;
function drawStuff() {
for (var i = 0; i <= 1; i++) {
var foobar = document.getElementById('elem_' + i);
while (foobar.childNodes.length >= 1) {
foobar.removeChild(foobar.firstChild);
}
for (var j = 0; j < 4; j++){
var elem_select = document.createElement('select');
for (var k = 0; k < num_select_options; k++) {
elem_select.appendChild(new Option("Blah", k));
}
foobar.appendChild(elem_select);
}
}
}
</script>
</head>
<body>
<table border=1 style="width:900px;" summary="A Table">
<tr>
<td> <div id="elem_0"></div> </td>
<td> <div>abc</div> <div id="elem_1"></div> </td>
</tr>
</table>
<a href="javascript:drawStuff()"> drawStuff() </a>
<script type="text/javascript">
drawStuff();
</script>
</body>
</html>