用innerHTML要小心了

昨天在家使用innerHTML时出现点小问题，调试了1个小时才明白：

代码：

js 代码

1. $('message').innerHTML+="<div id='abc'>";   
2. $('message').innerHTML+="<div id='abc_child'>";   
3. $('message').innerHTML+="<p>test</p>";   
4. $('message').innerHTML+="</div>";   
5. $('message').innerHTML+="</div>";  

看起来正确的代码，但是奇异的现象出现了，首先是页面上所有的css看起来都丢了。经过调试发现原来上述的代码变了：

js 代码

1. <div id='abc'></div>   
2. <div id='abc_child'></div>   
3. <p>test</p>   
4. <div></div>   
5. <div></div>  

神奇地把代码都补全了，造成原来的布局全没有。

当然要解决也很容易咯：

js 代码

1. var str="";   
2. str+="<div id='abc'>";   
3. str+="<div id='abc_child'>";   
4. str+="<p>test</p>";   
5. str+="</div>";   
6. str+="</div>";   
7. $('message').innerHTML=str;