[jQuery] 문서 객체 조작 - 문서 객체의 생성, 문서 객체의 삽입, 문서 객체의 이동, 문서 객체의 복제

 

 

문서 객체 조작

·       문서 객체의 생성

·       문서 객체의 삽입

·       문서 객체의 이동

·       문서 객체의 복제

 

 

 

문서 객체의 생성

 

메서드 이름	설명
$()	선택자를 이용해 특정 요소를 선택하여 문서 객체를 생성합니다.

 

 

 

 

문서 객체의 삽입

·       jQuery의 문서 객체 삽입 메서드 1

·       jQuery의 문서 객체 삽입 메서드 2

 

 

jQuery의 문서 객체 삽입 메서드 1

 

메서드 이름	설명
$(A).appendTo(B)	·       A를 B의 기존 자식의 뒤에 추가 ·       선택한 요소를 해당 요소의 마지막에 삽입합니다.
$(A).prependTo(B)	·       A를 B의 기존 자식의 앞에 추가 ·       선택한 요소를 해당 요소의 처음에 삽입합니다.
$(A).insertAfter(B)	·       A를 B의 뒤에 추가 ·       선택한 요소를 해당 요소의 앞에 삽입합니다.
$(A).insertBefore(B)	·       A를 B의 앞에 추가 ·       선택한 요소를 해당 요소의 뒤에 삽입합니다.

 

 

 

jQuery의 문서 객체 삽입 메서드 2

 

메서드 이름	설명
$(A).append(B)	·       B를 A의 기존 자식의 뒤에 추가 ·       선택한 요소의 마지막에 새로운 요소나 콘텐츠를 추가합니다.
$(A).prepend(B)	·       B를 A의 기존 자식의 앞에 추가 ·       선택한 요소의 처음에 새로운 요소나 콘텐츠를 추가합니다.
$(A).after(B)	·       B를 A의 뒤에 추가 ·       선택한 요소의 바로 뒤에 새로운 요소나 콘텐츠를 추가합니다.
$(A).before(B)	·       B를 A의 앞에 추가 ·       선택한 요소의 바로 앞에 새로운 요소나 콘텐츠를 추가합니다.

 

 

 

 

문서 객체의 이동

기존에 존재하는 문서 객체를 선택하고 문서 객체 삽입 메서드를 사용하면, 문서 객체를 쉽게 다른 곳으로 이동실 수 있습니다.

 

$(document).ready(function() { $('img').first().appendTo('body'); });

 

 

 

 

문서 객체의 복제

 

메서드	설명
clone()	문서 객체를 복제