IE에서 DOM을 사용해서 colspan을 적용하려면?

 DOM을 사용해서 HTML을 생성해낼 때 가끔(아니, 자주일지도...) 안되는 경우가 있다. 가령, colpsan 같은 속성이 적용이 안되는 문제다.

생성할 HTML 코드는 다음의 형태를 갖고 있다.

<table style="font-family: verdana; font-size: 10px;" border="1">
   <tbody>
       <tr>
           <td>Test1</td>
           <td>Test2</td>
       </tr>
       <tr>
           <td colspan="2">Test3</td>
       </tr>
   </tbody>
</table>

위의 HTML을 생성할 코드를 대충 Javascript로 짜면 다음과 같이 만들 수 있겠다.

var tableElm = document.createElement('table')
tableElm.setAttribute('border', '1px')
tableElm.setAttribute('style', 'font-family:verdana;font-size:10px;')
wrapper.appendChild(tableElm);

var tbodyElm = document.createElement('tbody')
tbodyElm.setAttribute('style', 'font-family:verdana;font-size:10px')
tableElm.appendChild(tbodyElm)

var trElm = document.createElement('tr')
tbodyElm.appendChild(trElm)

var tdElm = document.createElement('td')
tdElm.innerHTML = 'Test1'
trElm.appendChild(tdElm)

tdElm = document.createElement('td')
tdElm.innerHTML = 'Test2'
trElm.appendChild(tdElm)

trElm = document.createElement('tr')
tbodyElm.appendChild(trElm)

tdElm = document.createElement('td')
tdElm.innerHTML = 'Test3'
tdElm.setAttribute('colspan', '2')           
trElm.appendChild(tdElm)

이렇게 생성하는 코드를 브라우저에 출력시키면 어떻게 될까?

firefox의 화면

ie의 화면

firefox에서 적용된 스타일과 colspan이 ie에서는 전혀 적용이 되지 않은것을 확인할 수 있다.
무엇이 문제인가? 몇일을 고민한 결과 원인을 알아냈다. (스타일은 아직 알아내지 못하였다.)

정답은 ie에서 DOM으로 attribute를 설정하는 경우 대소문자를 가린다는 것이다.
colspan을 colSpan으로 수정하면 정상적으로 코드가 적용된 것을 확인할 수 있다.

DevToolBar에서 colSpan을 확인한 모습

P.S:
   DevToolBar를 사용하면 속성을 실시간으로 바꿔서 적용할 수 있다.