IE 8에서 AJAX 호출로 삽입된 HTML5 요소를 활성화하는 방법

구버전 인터넷 익스플로러(IE)에서는 section, article, nav 같은 HTML5 시맨틱 요소를 기본적으로 인식하지 못하기 때문에, 별도의 처리 없이는 스타일이 깨지거나 요소가 무시되는 문제가 발생합니다.

html5shiv를 사용한 해결 방법

가장 널리 쓰이는 해결책은 html5shiv입니다. HTML5 Shiv는 구형 인터넷 익스플로러에서 HTML5 섹셔닝 요소들을 사용할 수 있게 만들어 주고, IE 6~9 버전에 기본적인 HTML5 스타일링까지 제공합니다.

AJAX 호출 등으로 동적으로 HTML5 요소를 삽입하는 경우에도, 페이지 로드 시점에 html5shiv가 실행되어 있으면 대부분 정상적으로 동작합니다. 다만 동적으로 추가된 요소가 여전히 인식되지 않는다면 아래 방법을 함께 사용할 수 있습니다.

document.createElement로 요소 직접 생성

또 하나의 방법은 document.createElement 메서드를 이용해 해당 요소를 미리 선언해 주는 것입니다. IE는 createElement로 한 번이라도 생성된 태그는 CSS 스타일을 적용할 수 있게 되기 때문입니다.

var demo = document.createElement("demo");

demo.innerHTML = "Working!";
document.appendChild(demo);

이처럼 html5shiv와 createElement를 적절히 조합하면, AJAX로 삽입된 HTML5 요소도 IE 8 환경에서 안정적으로 표시하고 스타일링할 수 있습니다.