Forcing IE to Redraw List Items

January 7, 2010   ·   By Sheldon Conaty

Javascript is essential in allowing developers to tailor an intuitive and accessible experience for users. Web sites are becoming a lot more dynamic and javascript is key to this progression (side note: I'm not a fan of Flash, it makes my Mac work too hard). However, as usual developers encounter lots of browser interop issues - most of them with Internet Explorer.

Recently I was using javascript to dynamically add extra data to an unordered list item. This worked fine in FireFox and Safari. However, it turns out Internet Explorer 6 & 7 are very intolerant of content being added, or removed, from list elements. The problem is they don't recognize the list item has resized and therefore don't redraw it.

Luckily it is possible to give IE a nudge, so that it redraws the list. To do this you need to dynamically add a new child element to the list... and then remove it again. Here is an example javascript function, based on Prototype, which does exactly this. This function is now part of my toolbox and I call it after I add extra content to a list item.

/* IE 6 & 7 are very intolerant of extra content being
* added/removed to elements so a redraw needs to be
* forced.
*/
function forceListRedraw(listItem) {
  if (Prototype.Browser.IE) {
    try {
      var n = document.createTextNode(' ');

      listItem.appendChild(n);
      listItem.removeChild(n);

      list = listItem.up('ul');
      list.appendChild(n);
      list.removeChild(n);
    } catch(e) { }
  }
}