各浏览器中innerHTML实现差异

 

如下代码

1 2 3 4 5 6 7 8 9

<p id="tit"></p> <script>     try {         document.getElementById('tit').innerHTML = "<div>trtr</div>";     } catch(e) {         //IE<9 ERROR         alert(e)     } </script>

 

获取页面中id为tit的元素，为其innerHTML赋值。IE6/7/8中抛异常，其它浏览器正常。

 

但规范指出，段落P是不能包含P自身及其它块级元素的。IE6/7/8的处理洽洽是对的，其它浏览器则不对。

 

把innerHTML的值换成“<p>trtr</p>”，IE6/7/8仍然报错。

把innerHTML的值换成行内元素如“<span>trtr</span>”，IE6/7/8则不报错，正常执行。

 

 

如下代码

1 2 3 4 5 6 7 8 9 10 11 12

<p id="tit"></p> <script>     var p = document.getElementById('tit');     var div = document.createElement('div');     p.appendChild(div);     try {         div.innerHTML = "76"     } catch(e) {         //IE<9 ERROR         alert(e)     } </script>

 

执行顺序如下
1，获取页面上段落元素P
2，创建一个块级元素div
3，将div添加到段落P上（注：规范指出P不能包含块级元素）
4，给div的innerHTML赋值

 

结果：

IE6/7/8中抛异常。其它浏览器则不。

 

和第一篇一样，如果创建的是行内元素，IE6/7/8中则不报错。或者将2,3的顺序对调IE6/7/8也不报错。