在IE中遇到innerHTML的錯誤

工作紀錄

在寫AJAX式的網頁程式時，常會使用innerHTML來置換掉某部份內容。例如：
document.getElementById("someid").innerHTML = "xxxxxx";

今天遇到一個問題，在HTML中有
    <div id="mydiv">
        <table id="mytable" style="width: 99%px;"></table>
    </div>

然後用下列的JavaScript來填入table的內容：
      var s = "<tr><td>AAA</td><td>BBB</td></tr>";
      document.getElementById("mytable").innerHTML = s;

這樣的方式在Firefox, Chrome, Opera等都正常，唯獨 IE (8 & 9) 有問題，會出現"未知的執行階段錯誤" (unknown runtime error) 或 SCRIPT600 error。

後來發現，必須要用下列的方式才能滿足這四種browsers。
      var s = "<table id="mytable" style="width: 99%px;"><tr><td>AAA</td><td>BBB</td></tr></table>";
      document.getElementById("mydiv").innerHTML = s;
 
猜測：IE在填值到innerHTML時，可能會檢查所填入的內容。前面的例子只填入table的內容，沒有包含<table></table>的tag，IE可能認為這是不完整的內容而發生錯誤。後者則因包含了<table></table>tag，是完整的語法，因此就能接受。

後來也試了<select> tag，如果只給innerHTML一堆<option> tags，也是會有這樣的錯誤，若是包含select tag就OK了。