C
ccaveney
Guest
Hello, just want to make sure that the right folks are seeing this problem I found in IE9. I posted this on social.msdn.microsoft.com as well. In a nutshell, the innerHTML property doesn't seem to be updating when changes occur to the DOM. Below is a succinct code example that demonstrates the problem. To reproduce the problem, enter a value into the input element, then click on the button. This problem occurs in IE9 Standards Mode, but not in IE8 Standards mode.
My production workaround is to set my page content type to IE8 via a META tag.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>
<!-- old -->
<div id="myDiv">
<table>
<tr>
<td><input id="input1" /></td>
</tr>
</table>
</div>
<input id="myButton" type="button" onclick="addRow();" />
<script type="text/javascript">
function addRow()
{
var myDiv = document.getElementById("myDiv");
var theInner = myDiv.innerHTML;
var newHtml = "<tr><td><input id=\"input2\" value=\"0\" /></td></tr>";
myDiv.innerHTML = theInner + newHtml;
}
</script>
</body>
</html>
Continue reading...
My production workaround is to set my page content type to IE8 via a META tag.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>
<!-- old -->
<div id="myDiv">
<table>
<tr>
<td><input id="input1" /></td>
</tr>
</table>
</div>
<input id="myButton" type="button" onclick="addRow();" />
<script type="text/javascript">
function addRow()
{
var myDiv = document.getElementById("myDiv");
var theInner = myDiv.innerHTML;
var newHtml = "<tr><td><input id=\"input2\" value=\"0\" /></td></tr>";
myDiv.innerHTML = theInner + newHtml;
}
</script>
</body>
</html>
Continue reading...