[제이쿼리] 동적으로 DOM추가 each, append 함수

[제이쿼리] 동적으로 DOM추가 append 함수

예전에 동적으로 셀렉트 박스 내용 바꿔주기 할때 사용했던 append인데

프로젝트 중간중간 자주 사용하는 부분이라 복사용으로 포스팅 합니다.

이전엔 for문을 썻는데 each가 훨씬 간략하고 편하다 따로 길이를 구해주지 않아도 되기 떄문에

아주 편하게 사용 할 수 있다.

each에서 key 부분은 배열을 넣었을땐 index 숫자값이 들어오고

object(map) 형태의 데이터가 들어갔을떈 키값을 반환해 준다.

value는 당연히 해당 키값이나 인덱스의 값이 들어감.

아래 예제로 써놓은 코드는 dataList라는 배열에 각각 a,b,c,d,e 라는 맵형태의

데이터가 들어가있는 경우를 산정하고 작성한 것.

var dataList = [a,b,c,d,e];
//안에 있는 자식 노드 비우기    
$("#failListUl").empty();
// 반복
    $.each(dataList , function(key, value) { 
        // 안에 넣을 dom 생성 
        var addContent = $("<li>"+value.tag_ID+"</li>");
        // dom에 생성한 dom 추가
        $("#failListUl").append(addContent);
    });