[JavaScript] jQuery - 동적으로 요소 생성 및 제거

 

< jQuery에서 동적으로 요소 생성 >

 

var $el3 = $('<p></p>').text('Create Element By jQuery');
// <p>요소 생성 -> text()메소드로 content영역에 문구 추가
// jQurey로 만든 동적 요소를 구분하기 위해 변수명에 $를 붙임

// append(); 사용하여 자식요소로 추가
$('#area1').append(el1, el2, $el3);

 

 

< 삽입 관련 메소드 >

 

- 선택된 요소를 기준으로 새롭게 생성된 요소를 추가하는 메소드

 

$(A).append(B)	A요소 내에 뒷부분에 B를 추가(자손/하위)
$(A).prepend(B)	A요소 내에 앞부분에 B를 추가 (자손/상위)
$(A).before(B)	A요소 앞부분에 B를 추가(동위)
$(A).after(B)	A요소 뒷부분에 B를 추가(동위)

 

$(B).appendTo(A)	B를 요소 내에 뒷부분에 추가(자손/하위)
$(B).prependTo(A)	B를 요소 내에 앞부분에 추가(자손/상위)
$(B).insertBefore(A)	B를 요소 앞부분에 추가(동위)
$(B).insertAfter(A)	B를 요소 뒷부분에 추가(동위)

 

 

< 요소객체 복제 메소드 >

 

- 선택된 요소객체를 복제해서 반환해주는 메소드

- true / false : 해당 선택된 요소의 이벤트까지 복사할지 여부 지정 (생략 가능. 기본값이 false)

 

[ 표현법 ]

var 변수 = $('선택자').clone(true/false)

 

 

 

< 요소객체 제거 및 잘라내기 메소드 >

 

.empty()	선택된 요소의 모든 후손 요소들을 제거시켜주는 메소드
.remove()	해당 요소를 잘라내기 제거한 요소를 반환하는 개념으로 이벤트는 없어짐
.detach()	해당 요소를 잘라내기(이벤트 포함)