innerHTML问题！超级郁闷！

问题：
做网站时发现一个问题（firefox没问题，IE有如下问题）  
<div  id=""></div>  
<input  type="button"  οnclick="setdiv()"></input>  
...  
<script  language="javascript"  type="text/javascript">  
function  setdiv()  
{  
var  divi=document.getElementById("xp");  
divi.innerHTML  =  '<style></style>';  
alert(divi.innerHTML);  
}  
</script>  
...  
 
alert出来的结果为空，  
如果divi.innerHTML  =  '<style></style><div></div>';  
则alert出来的为<div></div> 

处理：  
经过一天折腾发现在对innerHTML进行赋值时，IE会对赋值的内容进行处理，tag标签会被解释，结果像<style>标签就被处理掉了。（<script>等标签也有同样的问题）

解决办法： 
很简单，只要在赋值的字符串前添加任意可以出现字符的html语句即可（特殊字符应当使用编码代替）
比如 ：        divi.innerHTML  = '&nbsp;' + '<style></style><div></div>';  //添加空格  
或者 ：        divi.innerHTML  = '<div>&nbsp;</div>' + '<style></style><div></div>'; 
但不能是： divi.innerHTML  = '<div></div>' + '<style></style><div></div>'; 
最好添为
 divi.innerHTML = '<div style="display:none">&nbsp;</div>' + '<style></style><div></div>';
 这样不会影响到原始布局。
 如果还在意新添加的<div>可以对innerHTML赋值后在使用removeChild方法移除
 divi.removeChild(divi.childNodes[0]); 
不知道为什么！！！
那位大虾知道可以留言（能够解释innerHTML的处理过程更好）！强烈欢迎！