메인메뉴 바로가기

HOME으로 가기


Javascript

제이쿼리 | 제이쿼리 총정리(3) - 요소의 추가,변경,삭제

본문


기존 요소의 내부에 추가
.append()선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가한다.
.prepend()선택된 요소의 첫번째에 새로운 요소나 콘텐츠를 추가한다.
.appendTo()선택된 요소를 해당 요소의 마지막에 추가한다.
.prependTo()선택된 요소를 해당 요소의 첫번째에 추가한다.


기존 요소의 외부에 추가
.before()선택한 요소의 바로 앞쪽에 새로운 요소나 콘텐츠를 추가한다.
.after()선택한 요소의 바로 뒤쪽에 새로운 요소나 콘텐츠를 추가한다.
.insertBefore()선택한 요소를 해당 요소의 앞쪽에 추가한다.
.insertAfter()선택한 요소를 해당 요소의 뒤쪽에 추가한다.


기존 요소를 포함하는 요소의 추가
.wrap()선택한 요소만을 포함하는 새로운 요소를 추가한다. 
$("p").wrap("<div></div>"); 
.wrapAll()

선택한 모든요소를 한번에 묶을수 있는 새로운 요소를 추가한다.

$("p").wrapAll("<div></div>"); 

.wrapInner()

선택한 요소 내부에 묶음 요소를 추가한다.

$("p").wrapInner("<div></div>"); 


기존 요소의 내부 변경
.html()

해당 요소의 HTML 콘텐츠를 반환하거나 설정한다.

.html("내용");​ //내용이 HTML 태그로 인식되어 삽입된다.

.text()

해당 요소의 텍스트 콘텐츠를 반환하거나 설정한다.

.text("내용");​ //내용이 텍스트로 인식되어 삽입된다.

 


요소의 복사
.clone()선택한 요소를 복사하여 새로운 요소를 생성한다.

 

 


요소의 대체
.replaceAll()선택한 요소를 지정된 요소로 대체한다.
.replaceWith()선택한 모든 요소를 지정된 요소로 대체한다.

 

 


요소의 삭제
.remove()선택한 요소를 DOM 트리에서 삭제한다. 삭제된 요소와 연관된 jQuery 데이터나 이벤트도 같이 삭제된다
.detach()선택한 요소를 DOM 트리에서 삭제한다. (삭제된 요소와 연관된 jQuery 데이터나 이벤트는 유지된다.
.empty()선택한 요소의 자식 요소를 모두 삭제한다.
.unwrap()선택한 요소의 부모 요소를 삭제한다.

 

 

 

 

  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기