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

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

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

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

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

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

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

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

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

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

select 와 option은 웹사이트를 구현할때 아주 많이 사용되며 유용한 태그 이다.

append 함수와 empty함수를 사용해 셀렉트박스 안에 있는 선택 옵션들을 HTML에 고정으로 만들어 두는 것이 아닌

특정 이벤트가 앞에 있는 셀렉트박스의 다른 값을 선택할때마다 동적으로 내용이 바뀌게 하는 방법을

알아 보도록 하자.

예를들어 1번 셀렉트 박스와 2번 셀렉트 박스가 있을떄

사용자가 1번 셀렉트 박스의 값을 선택할때마다 2번 셀렉트 박스의 선택 옵션의 내용이 바뀌도록 말이다.

혹은 1번 셀렉트 박스의 값이 바뀔때마다가 아닌 그 어떠한 이벤트라도 가능 하다.

먼저 위와 같은 코드로 셀렉트 박스가 2개 있을때

1번 셀렉트 박스의 값이 바뀔때마다 2번 셀렉트 박스의 옵션들이 바뀌도록 만들어 보자

여기서 주목할 것은

empty()와 append 이다

기존에 들어가 있는 2번 셀렉트 박스 안의 옵션들을 깨끗하게 지우기 위해서 empty함수를 사용 하였고

append 함수를 이용해 셀렉트 박스 안에 만들어진 option을 삽입한 것이다.

이를 응용하면 Ajax를 이용해 위의 스크립트와 같은 하드코딩이 아닌 좀더 다이나믹한 웹서비스를 제공해 줄수도 있다.