JavaScript innerHTML方法使用异常手记

innerHTML是使用频率非常高的一个JavaScript方法的，因为很多时候它可以代替复杂的DOM操作方法，它的作用就是向一个HTML容器插入带HTLM标记的文本字符内容，并保留HTML呈现效果。本人一直以为这个方法不会有浏览器软件兼容问题（指在目前常见的浏览器中）。今天在调试一段JS代码的时候，发现在IE下运行不正常，Firefox浏览器则没有问题，通过逐步排查发现问题出在innerHTML方法上，我用try
{}catch(e){}语句在IE下捕获一个“未知的运行时错误”，错误提示很不明了，最后经本人多次尝试测试发现是HTML嵌套问题。

先看看以下的标记写法，以下嵌套显然是不合法的。

<p id="box">
<li>Content text</li>
</p>

通过Dreamweaver自带的“验证”功能也确实发现这一问题的存在，错误提示如下图：

Dreamweaver验证信息

而本文要谈的innerHTML异常就发生在你把含有大的标签放入一个小的容器时（如把div放入span，形成<span><div>Content text</div></span>这种非法嵌套结构），或者是出现非约定的嵌套关系时。下面提供简单代码供你测试，你可以把以下代码复制另存为Test.html文件，然后分别在IE与FF浏览器运行它，你会发现它在IE下会报错（目前本人测试IE版本为IE7，不知道其它版本有没有这一问题）。真是感觉有时候IE还比FF标准，汗。

测试代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript innerHTML方法使用异常手记</title>
</head>

<body>
<p id="box"><li>Content text</li></p>
<script type="text/javascript">
try
{
    document.getElementById('box').innerHTML='<li>向P标签中插入含LI标签HTML内容</li>';  //IE下出现“未知的运行时错误”，FF浏览器正常
    //document.getElementById('box').innerHTML='<span>向P标签中插入含SPAN标签HTML内容</span>';  //IE与FF都正常
}
catch(e)
{
    alert(e.message);
}
</script>
</body>
</html>

相关内容：innerHTML方法会预先检查并修复包含HTML字符串标记的DOM完整度，请看下面举例：

<div id="box"></div>
<script type="text/javascript">
//innerHTML方法会预先检查并修复包含HTML字符串标记的完整度
ocument.getElementById('box').innerHTML='<span>向P标签中插入含SPAN标签但没有结束的HTML内容'; //注意这里span没有结束
alert(document.getElementById('box').innerHTML); //IE输出“<SPAN>向P标签中插入含SPAN标签但没有结束的HTML内容</SPAN>”，FF浏览器一样，只是两边的span就是小写的。
</script>

posted @ 2009-08-29 14:03 问道者阅读(3625) 评论(0) 编辑收藏举报

刷新页面返回顶部

JavaScript innerHTML方法使用异常手记

公告