wrapInner IE6 issue

wrapInner IE6 issue

I am trying to use wrapInner method. When I tried to attach div  to body tag it is clearing all the checkboxes checked on the form. This is happening only on IE6.
 
Here is my sample code
<html>
<head>
<script type="text/javascript">
function testInner()
{
      var wrapper = $('<div/>')
     .attr("id", "body-wrapper")
     .css({
      "position": "relative",
      "width": "100%",
      "height": "100%",
      "overflow": "auto"
     })






    $('body').wrapInner(wrapper);
}
</script>
</head>
 
<body>
<table>
      <tr>
             <td valign="top"><b>Test</td>
             <td valign="top"><input type="checkbox" name="chkAll" value="test"></td>
         </tr>


<tr>
      <td>
      <input type="button" value="test" onclick="javascript:testInner()"/>
</td>
</tr>
</table>
</body>
</html>
 
After selecting the checkbox and when I click on "test" button, it is clearing the checkboxes.
Could you please help me to resolve this issue on IE6?