In our application we are getting outer html of an object using the $('div').append(obj.clone()).html() approach. We're basically cloning the object, getting the html of the object and then doing some regex replacement on the html (mainly to replace ID, and some other attributes). These objects are of INPUT type and their value may have changed by the user. It all worked fine until we tried it in IE9 standards mode. For whatever reason in this mode grabbing outer HTML of the object does not seem to get the updated value in the HTML. To demonstrate this here's a small program - try running it in IE8 standards first and you'll see that it updates the value, then next call to print html will show the updated value. BUT... if you swithc to IE9 mode (standards) then it shows the original value when it prints out the HTML, even after the value has been changed. There are two functions - doStuff and doStuff2 - they both have the same results. I just did both to see if maye it's the problem with clone() , but it doesn't seem to be. Here;s the POC code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="jquery-1.6.4.js" type="text/javascript" charset="utf-8"></script>
</head>
<script type="text/javascript">
$(document).ready(doStuff2 );
function doStuff()
{
alert($('#testinput').val());
alert( ($('').append($('#testinput').clone())).html());
$('#testinput').val('newValue');
alert($('#testinput').val());
alert( ($('').append($('#testinput').clone())).html());
}
function doStuff2()
{
alert($('#testinput').val());
alert( ($('#one').append($('#testinput'))).html());
$('#testinput').val('newValue');
alert($('#testinput').val());
alert( ($('#two').append($('#testinput'))).html());
}
</script>
</head>
<body>
<input type="text" id='testinput' value="test">
<div id='one'/>
<div id='two'/>
</body>
</html>
Thanks
