DOM select와 option element 생성하기

1월에 작성했던 메모....

===
Cross-Browser 문제를 절실히 실감하고 있당;;
Firefox에선 제대로 돌아가는 것이 Explorer에선 잘 되지 않는다.
코드는 아래와 같다.

function addOpt() {
    var sel = document.getElementById("sel");   //select box
    var opt = document.createElement("input");
    opt.text = "optText";
    opt.value = "optValue";
    sel.appendChild(opt);
}

Firefox에선 잘 돌아가지만 익스플로러에선 opt.text가 적용되지 않는다.
이를 해결하기 위해선,..

1) innerHTML을 사용한다.
    opt.text = "optText"; 대신 opt.innerHTML = "optText";
    내키진 않지만 innerHTML을 쓸 경우 제일 깔끔하게 구현할 수 있다.
    Firefox에서도 이상없이 작동된다.

2) textNode를 추가한다.
    opt.text = "optText"; 대신 opt.appendChild(document.createTextNode("optText"));
    opt 아래 textNode를 추가하는 방식이다.
    문장이 좀 길어지긴 한다. 역시 Firefox에서도 이상없이 작동된다.

3) options.add를 사용한다.
    sel.appendChild(opt) 대신 sel.options.add(opt, 0);
    select box의 객체를 사용하여 추가하는 방식이다.
    위 코드대로라면 나중에 추가되는 element가 0번 index부터 들어가기 때문에,
    sel.options.add(opt, c.options.length + 1); 로 해주는 방법도 좋겠다.
    역시 Firefox에서도 잘 돌아간다.

위 테스트는 Firefox 2.0과 Explorer 7에서 이루어졌다.
Explorer 7은 W3C 표준을 잘 지켰다고 하는데,..
음~ 언제쯤 브라우저 간 호환을 걱정하지 않아도 될까~~