new earth online

The DOM, as accessed by JavaScript, has it's differences between browsers. The previousSibling and nextSibling are two prototype functions that suffer from such differences.

The problem is caused by the way Mozilla Firefox sees characters outside of tags. In the following code example Firefox would see there being a Text sibling between the two P tags.

<p id="para1">Some text</p>
<p id="para2">Some more text</p>

This same code will be intrepreted in Internet Explorer as the nextSibling of para1 being para1 (but in firefox it is the whitespace that occurs between). So what we can use reliably between browsers are:

document.getElementById('para1').nextSibling;
document.getElementById('para2').previousSibling;

To right this wrong we need to waste bandwidth by providing our own code for doing this, or we could just not use nextSibling and previousSibling. If you do decide you need to use them, and for it to be reliable across browsers then you could try the following code:

function getPreviousSibling (elem)
{
  elem = document.getElementById(elem);
  while (elem.tagName == 'undefined') {
    elem = elem.previousSibling;
  };

  return elem;
}


function getNextSibling (elem)
{
  elem = document.getElementById(elem);
  while (elem.tagName == 'undefined') {
    elem = elem.nextSibling;
  };

  return elem;
}

And that should solve the woes of siblings in Mozilla.