<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=euc-kr"/>
</head>
<body>
<script type="text/javascript">
var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("name", "name");
input.setAttribute("value", "333");
var container = document.createElement("div");
container.appendChild(input);
alert(container.innerHTML);
</script>
</body>
</html>
폼에 동적으로 요소를 추가하기 위해 위와같은 테스트 코드를 만들어서 IE, FF에서 각각 돌려보니 FF에서는 의도한대로 <input value="333" name="name" type="text"> 라는 결과가 나오지만 IE에서는 <INPUT value=333> 라고만 나옵니다.
보니까 IE에서는 setAttribute의 첫번째 인수가 name, value 같은 특정한 단어일때는 동작을 안하는것 처럼 보이더라구요..
이 문제를 어떻게 해결하면 좋을까요?
(모질라 포럼에 올리기에는 좀 어울리지 않는 질문이지만.. 양해 부탁드리겠습니다 - -;)
createElement("input") 같은 식으로만 되는건줄 알았는데 createElement('<input type="text" name="n">'); 이렇게 쓰면 되는거였군요.. outerHTML = '<input type="text" name="n">'; 이렇게 쓰면 인식이 안되길래 머리뜯고있었는데..
