JavaScript在IE下设置innerHTML时出现"未知的运行时错误"-优快云博客

本文链接：https://blog.youkuaiyun.com/FuDesign2008/article/details/4793384

问题

想动态的改变<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>标签都有可能出错, 所以应该避免使用这些标签作为容器.