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>

这是一个现有的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>');
});

为什么这个javascript在IE7或Safari中不起作用？

3 个答案: