크롬에서는 되는데 익스플로러에서 안될 때(1) - IE JQuery로 append시 데이터 변경 문제

♨ 크롬에서는 되는데 익스플로러에서는 안될 때 ♨

<li> 태그를 이용하여 목록을 생성하기 위해 

js 파일의 ajax 에서 DB 값을 뷰에 append 시킨다.

$("#"+select_object_id).append("<li value='"+code_value+"'>"+code_name+"</li>");

이 부분에서 append가 수행된다.

Chrome 에서는 <li> 의 value 값이 위 처럼 정상적으로 들어간것을 볼수있다.

(이 리스트는 code_value와 code_name이 같음)

 

하지만 익스플로러에서는 code_value 가 text 임에도 불구하고 맨앞의 0 이 없어져,

DB 조회시 값이 나오지 않는다.

특정 데이터는 아래처럼 아예 변질되는 경우도 있다.

append 부분에서 디버그를 해보아도 분명 제대로 나오지만

어디서 변질되는지 모르게 실행 후엔 아래처럼 바뀌어있다.

인터넷 브라우저 간의 스크립트 지원 문제가 있다고 익히 들었지만,

데이터가 변질되는 경우는 처음이다.

방법을 찾던 중 <li> 태그의 value에 값을 주지 않고 다른 속성을 이용해 보기로 하였다.

$.ajax({
    type: "get",
    dataType: "xml",
    data: data,
    url: "/common/" + function_id,
    success: function(xml) {
        if($(xml).find("code").find("item").length > 0) {
            $(xml).find("code").find("item").each(function() {
                var code_value = $(this).find("code_value").text();
                var code_name = $(this).find("code_name").text();
            
                if(content_id == 'att' && code_value != 'null'){
                    if(selected_value == ''){
                        var code_id = $(this).find("code_id").text();
                        $("#"+select_object_id).append("<li id='"+code_id
                        +"' value='"+code_value+"'>"+code_name+"</li>");
                    }
                    else{
                        $("#"+select_object_id).append("<li alt='"+code_value+"'>"
                        +code_name+"</li>");
                    }
                }
            });  
        }
    },
    error: function(xhr, status, error) {
        alert(status);
    }
});

시험삼아 alt 에 값을 넣어보았다. 

그 결과,

<li value=""> 에 넣을때는 왜 변질되는지 모르겠지만...

<li alt=""> 에 넣으니 익스플로러는 물론 크롬에서도 잘 잡힌다!