为什么此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>');
});