insertBefore and IE7

First apologies, the pages I working on a behind passwords, I hope this is enough but if you'd like more code, just ask!

I've got a webpage that list events, each event is a complex set of elements all wrapped in an relative positioned div, an eventRow.

When adding a new event, I find where it should be placed and use:

document.getElementById('even开发者_StackOverflow中文版tRows').insertBefore(div, document.getElementById('eventRow' + id));

div is the new event row, id is the id of the event I want to insert before!

This works perfectly in Chrome, Safari, Firefox and IE8, but in IE7 it goes wrong - the new event row seems to be placed correctly, but the rows that surround it aren't correctly moved out of the way, leaving a mess of overlapping text.

After a while I found this can be fixed, after the insert, using the code:

$('eventRows').innerHTML = $('eventRows').innerHTML;

So I've almost solved it, but I'm not very happy, any thoughts on the following questions:

Should I just do this as it seems to work?

Should I only do it if the browser is IE7?

Should I find a better fix?

Many thanks

Ben.

You can try forcing a redraw. There are a few ways that I can think of:

• The one you describe
• node.className = node.className is reported to work although I've never tried it.
• Append a text node
• Add a class and then remove it.
• Make other style changes and then remove them (padding, border, margin)

Append a text node:

function redraw(node) {
  var doc = node.ownerDocument;
  var text = doc.createTextNode(' ');
  node.appendChild(text);
  setTimeout(function() {
    node.removeChild(text);
  },0);
}

Add/Remove a class

function redraw(node) {
  node.className += ' redraw';
  setTimeout(function() {
    node.className = node.className.replace(/\sredraw$/, '');
  }, 0);
}

This code is untested since I don't have IE7

These methods also exist in the various libraries out there. For Ext it's Element.repaint(). There is a force_redraw plugin for jquery: http://plugins.jquery.com/content/forceredraw-102. I'm sure there are others, I just don't know about them.

After much playing I've plumped for the following:

function redrawElement(e) {
    if (/MSIE (\d+\.\d+);/.test(navigator.userAgent) && new Number(RegExp.$1) <= 7) {
        e.innerHTML = e.innerHTML
    }
}

Many of the other ideas nearly worked, but not quite, the padding idea worked once, but caused a nasty jump with the timeout, this does't seem to clause any issues with performance - so why not! :-)

Thanks for your help!!