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


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


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


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


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


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

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


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


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


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




1
2
3
4
5
6
7
8
9
10
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);
    });
cs


저작자표시 비영리

'Yame Daily Life' 카테고리의 다른 글

[리뷰] 스노우 울프 엠팽 베이비 후기  (0) 2019.06.10
[합죽선] 부채를 좋아하는 사람 (전통을 손에 쥐기까지)  (3) 2019.05.20
[라그M] 니플헤임 안개숲 초월 퀘스트 NPC 위치!  (0) 2018.11.12
[라그M] 프리 비숍 룬판 정보(5.0 추가)  (2) 2018.10.10
[MSSQL] 날짜,시간 데이터 생성하기  (0) 2018.07.10

제이쿼리에서 foreach문 사용하는 방법


1. 배열 사용


$.each() 함수를 사용하여 배열을 반복문 형태로 사용할 수가 있다.


ex)1


1
2
3
4
5
6
7
8
9
10
11
// 예제1
$.each([0,8,4,10], function(index, value) { 
      console.log(index + ':값 = ' + value); 
    });
 
//예제2
var arr = [0,8,4,10];
 
$.each(arr, function(index, value) { 
      console.log(index + ':값 = ' + value); 
    });
cs



예제 1번과 2번을 실행하면


콘솔창엔 다음과 같은 결과가 동일하게  나온다


1
2
3
4
0:값 = 0
1:값 = 8
2:값 = 4
3:값 = 10
cs





2. 맵 사용


맵형식을 가지고 있는 데이터를 사용할땐 key와 value의 쌍으로 사용한다.


ex)2


1
2
3
4
5
6
7
8
9
10
11
var map = { 
  'name': 'yamea', 
  'age': '99' 
}; 
$.each(map, function(key, value) { 
  console.log(key + ': ' + value); 
});
 
// 결과
name: yamea
age: 99
cs




3. json 형식 데이터 사용


조금 더 나아가서 우리가 흔하게 사용하는 여러개의 오브젝트들이 담긴 배열을 사용할땐 조금만 응용을 하면 된다.


ex)3


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var map1 = { 
          'name': 'yamea', 
          'age': '10' 
        };
var map2 = { 
          'name': 'yamea2', 
          'age': '20' 
        };
var map3 = { 
          'name': 'yamea3', 
          'age': '30' 
        };
var arr = [map1, map2, map3];
 
        $.each(map, function(key, value) { 
          console.log("이름 = "+ value.name); 
        });
        
        // 결과값
        
        이름 = yamea
        이름 = yamea2
        이름 = yamea3
cs


위와 같은 방식으로 사용을 할 수 있다.


아주 간단한 방법으로 긴 for문을 사용하지 않고도 간단하게 사용할 수 있는 방법이다.

저작자표시 비영리

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

[자바스크립트] 정규식을 이용한 초간단 천단위콤마  (0) 2016.07.26
[제이쿼리] 동적으로 select option 추가 하기(empty와 append)  (4) 2016.07.13
[JavaScript] object 객체의 속성 동적 추가  (0) 2016.03.07
[javaScript] setInterval / 시간단위 반복  (0) 2015.07.01
[JavaScript] 제이쿼리로 레이어팝업 만들기  (0) 2015.06.23

+ Recent posts

티스토리툴바