JavaScript在IE下设置innerHTML时出现"未知的运行时错误"

最新推荐文章于 2017-11-22 00:27:40 发布

原创最新推荐文章于 2017-11-22 00:27:40 发布 · 994 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

javascript

html

本文探讨了在Internet Explorer浏览器中动态修改<p>标签的innerHTML属性时遇到的未知运行时错误问题。通过调整<script>标签的位置及使用更宽容的容器标签如<div>或<span>，可以有效解决此问题。

问题

想动态的改变<p>标签的innerHTML内容,但在IE下却报"未知的运行时错误".

Html页面如下程序如下:

<html>
    <head>
    <title>test</title>
    </head>
    <body>
    <script>
    document.getElementById('trone').innerHTML = '<span>haha</span>';
    </script>
    <p id='trone'></p>
    </body>
</html>

原因

<script>标签在<p>标签之前, JavaScript代码执行时, 无法访问到<p>标签, 因为这时候<p>标签还未被浏览器解析.

建议将<script>标签放在页面底部, 除了可以避免以上问题, 还能提升性能(可参考Best Practices for Speeding Up Your Web Site 中 "Put Scripts at the Bottom").

扩展知识

即使<script>出现在被操作标签之后, 在IE下仍然可能出现该问题.

这主要因为IE在对innerHTML进行写操作的时候会检查被操作元素是否符合作为内容对象容器的要求. 比如, 如果在一个<p>标签里加入<li>标签，这很可能会出现以上的错误.如果发现这类错误出现,我们可以尝试做以下事情:

检查你尝试加到innerHTML的html代码是否包含破损的html标签，如没有<ul></ul>包围的<li></li>.
把被赋innerHTML的容器改成那些比较"包容"的标签，如<span>, <div>标签. 需要特别注意的是, 即使<tbody>,<table>, <tr>标签里面加正确格式的<td>标签都有可能出错, 所以应该避免使用这些标签作为容器.