html - Javascript で動的 html テーブルを生成すると、IE では機能しません

Question

いくつかの行と列を持つ Javascript の div 要素にテーブルを作成しました

var parentElement = document.getElementById('divExcelData');
var tableElement = document.createElement('table');
  tableElement.border = "1";

  for (var r = 1; r <= 3; r++) {
      var rowElement = document.createElement('tr');
      for (var c = 1; c <= 2; c++) {

          var colElement = document.createElement('td');
          colElement.setAttribute("style", "width:80px; height:20px; border:1px solid Black;");              
          var divElement = document.createElement('div');

          divElement.id = r + '_' + c;
          divElement.contentEditable = "true";
          divElement.style.width = "100%";
          divElement.style.height = "100%";       
          colElement.appendChild(divElement);
          rowElement.appendChild(colElement);
          }
          parentElement.appendChild(tableElement);
    }

しかし問題は、Internet Explorer(9) 開発者ツールからページをデバッグすると、テーブル要素の内部 html が次のように表示されることです...

<TABLE border=1>
<TR>\r\n
<TD>\r\n
<DIV style=\"WIDTH: 100%; HEIGHT: 100%\" id=1_1 contentEditable=true></DIV>
</TD>\r\n
<TD>\r\n
<DIV style=\"WIDTH: 100%; HEIGHT: 100%\" id=1_2 contentEditable=true></DIV></TD>
</TR>
\r\n
<TR>\r\n
<TD>\r\n
<DIV style=\"WIDTH: 100%; HEIGHT: 100%\" id=2_1 contentEditable=true></DIV>
</TD>
\r\n
<TD>
\r\n
<DIV style=\"WIDTH: 100%; HEIGHT: 100%\" id=2_2 contentEditable=true></DIV>
</TD>
</TR>
\r\n
<TR>
\r\n
<TD>
\r\n
<DIV style=\"WIDTH: 100%; HEIGHT: 100%\" id=3_1 contentEditable=true></DIV>
</TD>
\r\n
<TD>
\r\n
<DIV style=\"WIDTH: 100%; HEIGHT: 100%\" id=3_2 contentEditable=true>
</DIV>
</TD>
</TR>
</TABLE>

\r\n が HTML に追加され、スタイル要素に (") ではなく (\") が含まれている理由がわかりません。そのため、ページには何も表示されません。このコードは、Chrome と Firefox でうまく機能します。