Html table does not redraw after adding to its DOM ie8

Question

IE bugs out on me with a large table by not redrawing the table when I add input's to it using jquery. It forces a redraw/update when I scroll the table up or down but otherwise it doesnt render the input properly.

<div style="overflow: auto;">
   <table>
       <tbody>
           /// lots of rows
       </tbody>
   </table>
</div>

and the javascript snippet :

input = $(document.createElement("input"));
input.attr("type", "text");
input.attr("value", $.trim(div.html())); 
TD.prepend(input);

This works just fine in firefox but refuses to behave in IE8. A way to fix is to force a redraw but I can't seem to find a way to do that.

I think ie8 is rendering in quirks mode but it doesnt work in either ie8 or quirks mode.

[Edit]

function forceIERedraw() {
    if ($.browser.msie) {
        obj = getThing();
        obj.scrollTop = obj.scrollTop - 1;
        obj.scrollTop = obj.scrollTop + 1;
    }
}

This works but of course makes the screen shake ever so slightly. Horribly hacked but at least you can see things that I add to the dom.

Answer 1

hiding and showing the body usually works with issues like yours:

input = $(document.createElement("input"));
input.attr("type", "text");
input.attr("value", $.trim(div.html())); 
TD.prepend(input);
document.body.style.display = 'none';
document.body.style.display = 'block';

Answer 2

Turns out the problem was specific to the website im working on (10 years old at that.) and rendering in ie quirks mode. Basically the whole thing was a mess and this was a side effect of various other problems on the page.