為什么此javascript在IE7或Safari中不起作用？

Question

Firefox可以很好地處理它，但是Safari和IE7會靜默失敗，並且不會插入該元素。

<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/">Some Text</a></li>' + ul.innerHTML;
</script>

這是一個exisitng html結構，例如：

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

我沒有控制HTML的功能，但確實可以在頁面正文中插入一小段javascript。

不幸的是，我似乎對跨瀏覽器javascript支持的教育程度不高。 我是否需要通過某種onPageLoad事件將其連接起來？

Answer 1

好像您在加載DOM之前就在對其進行操作，請嘗試在window.onload監聽器中添加該代碼段：

<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/">Some Text</a></li>' + ul.innerHTML;
}
</script>

Answer 2

是的，在文檔加載完成之前，IE無法訪問DOM元素。

Answer 3

通常，您必須等待DOM准備就緒才能執行修改DOM的腳本。

一種簡單的方法是使用jQuery ：

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