[jQuery] 요소의 동적 생성

Notice

Recent Posts

Recent Comments

Tags more

Archives

관리 메뉴

재유's

IT Story/　: : JQuery

Stella_NY 2019. 2. 13. 09:57

요소의 동적 생성

<BODY> 태그 안에 명시된 태그 요소를 객체화 하는 경우

태그 이름을 $() 함수에 전달한다.

1
var obj = $("div");

<BODY> 태그 안에 명시되지 않은 태그 요소를 객체화 하는 경우

태그 이름을 <>로 감싸서 $()함수에 전달한다.

1
var obj = $("<div>");

이렇게 생성된 요소들은 jQuery의 기능들을 적용할 수 있다.

1
2
var obj = $("div");
obj.attr('id', 'hello').css(...).addClass('item');
c

기존에 존재하는 요소를 복사하는 경우

1
2
var obj = $("#foo").clone();
obj.arrr('id', 'helloworld');

- 모든 속성을 동일하게 복사하므로 id속성값 같은 경우(중복되어서는 안되므로)는 다른 값으로 변경해 주어야 한다.

동적으로 생성된 요소를 HTML문서에 삽입하기

함수	설명
A.html(B)	A의 시작태그와 끝태그 사이의 내용을 B로 대체한다.
A.append(B)	A에 B를 추가한다. 기존 내용을 유지하면서 맨 뒤에 추가한다.
B.appendTo(A)	B를 A에 추가한다. 기존 내용을 유지하면서 맨 뒤에 추가한다.
A.prepend(B)	A에 B를 추가한다. 기존 내용을 유지하면서 맨 앞에 추가한다.
B.prependTo(A)	B를 A에 추가한다. 기존 내용을 유지하면서 맨 앞에 추가한다.
A.insertBefore(B)	A를 B의 직전에 삽입한다.
A.insertAfter(B)	A를 B의 직후에 삽입한다.
A.empty()	A의 모든 내용을 비운다.

동적으로 생성된 요소에 대한 이벤트 적용

- 기존의 이벤트 처리는 생성한 객체에 적용한다는 개념이지만,

동적 요소에 대한 이벤트 처리는 앞으로 생성될 객체에 적용할 이벤트를 미리 준비해 둔다는 개념이다.

1
2
3
4
$(document).on('click', '#hello', function (e) {
    e.preventDefault();   
    ...
});

주의 : 동적 생성 요소가 <form>인 경우에는 e객체를 사용해서는 안된다.

저작자표시

공유하기 링크

'IT Story/　: : JQuery' Related Articles

Comments