Why would this javascript not work in IE7 or Safari?

Question

Firefox handles it fine, but Safari and IE7 silently fail and do not insert the element.

<script type="text/javascript">
  var ul = document.getElementById('xg_navigation').getElementsByTagName('ul')[0];
  ul.innerHTML = '<li id="xg_tab_home" class="xg_subtab"><a href="http://somedomain.com/"&gt;Some Text</a></li>' + ul.innerHTML;
</script>

This is with an exisitng html structure like:

<div id="xg_navigation">
  <ul>
    <li><a href="...">Foo</a></li>
    ...
  </ul>
</div>

I dont have control over the HTML, but I do have the ability to insert a snippet of javascript in the page body.

Sadly I appear to be poorly educated on cross browser javascript support. Do I need to hook it it up via an onPageLoad sort of event somehow?

Answer 1

Yes, IE cannot access DOM elements until the document load is complete.

Answer 2

Seems like you are manipulating the DOM before it has been loaded, try adding that snippet of code inside the window.onload listener:

<script type="text/javascript">
window.onload = function() {
    var ul = document.getElementById('xg_navigation').getElementsByTagName('ul')[0];
    ul.innerHTML = '<li id="xg_tab_home" class="xg_subtab"><a   href="http://somedomain.com/"&gt;Some Text</a></li>' + ul.innerHTML;
}
</script>

Answer 3

Usually you have to wait for the DOM to be ready to execute a script that modifies the DOM.

An easy way to do that is to use jQuery:

$(function() { 
    $('#xg_navigation ul').prepend('<li id="xg_tab_home" class="xg_subtab"><a href="http://somedomain.com/"&gt;Some Text</a></li>');
});