Internet Explorer (9, 10) Bug - createElement()

기능 테스트 도중 IE 9와 IE 10에서 동작하지 않는 부분을 발견하였다. 소스코드를 뜯어보니.. 아무래도 createElement() 부분에서 에러가 난 듯 싶다.

위 사진에서처럼 createElement() 부분에서 InvalidCharacterError() 가 발생하였다.
IE11에서는 멀쩡히 돌아갔었는데, 이상하다.. 에러 발생 이유를 찾아보니 IE9나 10에서는 createElement 안에는 <>를 이용해 풀 태그로 인자를 넘기는 게 안된다는 듯 하다.
실제로 에러가 난 부분의 소스코드를 아래와 같았다.

 var table = document.createElement("<table cellpadding="0" cellspacing="0" border="0">");

아래와 같은 방식으로 해결하였다.

if(IE 버전 체크) { // not IE9, IE10
    var table = document.createElement('<table cellpadding="0" cellspacing="0" border="0">');
} else {
    var table = document.createElement('table');
    table.setAttribute('cellpadding', 0);
    table.setAttribute('cellspacing', 0);
    table.setAttribute('border', 0);
}

익스프로러 버전을 체크하고 createElement() 대신 setAttribute()를 활용하면 해결할 수 있다.