JS中的innerHTML的一个小问题

在一次工作应用中 发现innerHTML的一个比较有意思的地方，如代码

<table><tr><td><div id="xxx">

</div></td></tr></table>

<script>    

 var showMessage2 = "";
   function tijiao(){
       showMessage2 = document.getElementById("yyy");
       showMessage2.innerHTML = "<tr><td>测试INNERHTML</td></tr>"}

tijiao();

   </scritp>

如果是这样，则<tr><td></td></tr>中的内容显示不出来，但如果在前后加个<table></table>,改成如下的代码,则可以显示需要的内容

<script>    

var showMessage2 = "";
   function tijiao(){
       showMessage2 = document.getElementById("yyy");
       showMessage2.innerHTML ="<table><tr><td>测试INNERHTML</td></tr></table>"}

tijiao();

   }</scritp>