2008. 5. 7. 17:51

createElement 의 사용(IE에서만의 특별한 방법)과 radio button 작동 버그

javascript
createElement 사용에 관련된  W3C DOM 에 대한 글을 보면 다음과 같다
The W3C DOM spec is supposed to be "the name of the element type to instantiate" (e.g., createElement('input'))

하지만 IE에선 이런 방법도 가능하다
var radio1 = document.createElement("<input type=radio name=onandoff value=on>");
var radio2 = document.createElement("<input type=radio name=onandoff value=off>");
document.body.appendChild(radio1);
document.body.appendChild(radio2);

FF, Opera, Safari 등에서도 작동할 수 있도록 짜면 다음과 같다
var radio1 = document.createElement("input");
var radio2 = radio1.cloneNode(false);
radio1.value = "on";
radio2.value = "off";
document.body.appendChild(radio1);
document.body.appendChild(radio2);

첫번째 방법을 사용하면 FF에서는 error가 발생한다
크로스 브라우징을 위해선 두번째 방법을 사용하는 것이 좋겠다

하지만, 두번째 방법으로 사용시 IE6과 IE7에서는 문제가 있다
직 관적으로 생각하면 위의 두가지 코드는 아래의 HTML 코드와 같기 때문에 하나를 선택하면 다른 하나가 선택해제되는 radio 버튼의 작동을 해야 정상이지만 두번째 코드를 사용하면 IE에서는 동작하지 않는다. (클릭을 해도 선택이 되지 않음)
<input type="radio" name="onandoff" value="on"/>
<input type="radio" name="onandoff" value="off"/>

속성값이 잘 적용되지 않을 때 setAttribute 메소드를 사용한 우회적인 방법으로 작동시킨 경험이 몇번 있어서 이번에도 아래와 같이 사용해 보았지만 결과는 똑같았다 (FF에서는 되고 IE에서는 작동안하고.)
var radio1 = document.createElement("input");
radio1.setAttribute("name", "onandoff");
radio1.setAttribute("type", "radio");
var radio2 = radio1.cloneNode(false);
radio1.value = "on";
radio2.value = "off";
document.body.appendChild(radio1);
document.body.appendChild(radio2);

찾은 해결책은 innerHTML 을 이용하는 방법과 try ~ catch 문을 사용하는 것..

innerHTML 을 사용하는 건 다음과 같다
document.body.innerHTML += "<input type=radio name=onandoff value=on>";
document.body.innerHTML += "<input type=radio name=onandoff value=off>";
다 만 Element 의 Reference 값을 얻을려면 좀 우회해야 한다. innerHTML 의 뒤에 추가하고 바로 lastChild 로 찾는 방법이 있지만 좀 모듈화 시켜보면 (보다 돌아가는 방법이지만.) 이런 코드를 사용할 수도 있다
function createRadioButtonElement () {
    var tempTag = document.createElement('temp');
    tempTag.innerHTML = "<input type=radio name=/>";
    var radioButtonElement = tempTag.removeChild(tempTag.firstChild);
    delete tempTag;
    return radioButtonElement;
}
var radio1 = createRadioButtonElement();
radio1.name = "onandoff";
var radio2 = radio1.cloneNode(false);
radio1.value = "on";
radio2.value = "off";
document.body.appendChild(radio1);
document.body.appendChild(radio2);

try ~ catch 문을 사용하는 예제는 다음과 같다
var radio1;
try {
  radio1 = document.createElement("<input type='radio' name='onandoff'>");
}
catch (e) {
  radio1 = document.createElement('input');
  radio1.type = 'radio';
  radio1.name = 'onandoff';
}
var radio2 = radio1.cloneNode(false);
radio1.value = 'on';
radio2.value = 'off';
document.body.appendChild(radio1);
document.body.appendChild(radio2);

결론: IE 에서는 radio 버튼에 name 속성을 적용시켜 동작하게 할려면 createElement("input") 외의 다른 우회적 방법이 필요하다.

'javascript' 카테고리의 다른 글

JavaScript 배열 변수 메소드 정리  (1) 2008.05.14
User preferences color table v 1.0  (0) 2008.05.14
JPT v 1.0 자바스크립트 코드 포퍼먼스 테스터 (JavaScript code Performance Tester)  (0) 2008.05.14
[AJAX] 파일 업로드 프로그레스 모니터(File Upload Progress Monitor) 구현에 관해..  (1) 2008.05.14
자바스크립트 타입 비교 테이블 + 테이블 작성 스크립트  (0) 2008.05.07
Posted by 아즈키

티스토리툴바