[제이쿼리] jQuery 객체편집 메서드

 

제이쿼리(jQuery) 객체편집 메서드

---

객체 편집 메서드 포스팅입니다. 객체 편집 메서드는 선택한 요소를 복제하거나 새 요소를 생성하는 메서드와 복제하거나 새로 생성한 요소를 의도한 위치에 삽입하고 선택한 요소를 삭제하는 기능이 있습니다. 아래에서 자세히 살펴보겠습니다.

 

 

before()/insertBefore()/after()/insertAfter() 메서드

---

종류	설명
$("요소 선택").before("새 요소"); $("요소 선택")insertBefore("요소 선택");	선택한 요소의 이전 위치에 새 요소를 추가합니다.
$("요소 선택").after("새 요소"); $("새 요소").before("요소 선택");	선택한 요소의 다음 위치에 새 요소를 추가합니다.

 

 

 

append()/appendTo()/prepend()/prependTo() 메서드

---

append()와 appendTo() 메서드는 선택한 요소 내의 마지막 위치에 새 요소를 생성하고 추가합니다.

prepend()와 prependTo() 메서드는 선택한 요소 내의 앞 위치에 새 요소를 생성하고 추가합니다.

종류	설명
$(요소 선택).append(새 요소); $(새 요소).appendTo("요소 선택");	선택한 요소 내의 마지막 위치에 새 요소를 생성하고 추가합니다.
$(요소 선택).prepend(새 요소); $(새 요소).prependTo("요소 선택");	선택한 요소 내의 앞 위치에 새 요소를 생성하고 추가합니다.

 

 

clone() / empty() / remove() 메서드

---

종류	설명
$("요소 선택").clone([ true | false ]);	선택한 요소를 복제합니다. 인자값이 true면 벤트까지 복제하고, false면 요소만 복제합니다. 기본값은 false입니다.
$("요소 선택").empty( );	선택한 요소의 모든 하위 요소를 비웁니다.
$("요소 선택").remove( );	선택한 요소를 삭제합니다.

 

 

 

replaceAll() / replaceWith() 메서드

---

선택한 요소를 새 요소로 바꿀 때 사용합니다. 주로 선택한 모든 요소를 한꺼번에 바꿀 때 상요하며 각 메서드의 기본형은 다음과 같습니다.

 

종류	설명
$("새 요소").replaceAll("요소 선택");	선택 요소들을 새 요소로 교체합니다.
$("요소 선택").replaceWith("새 요소");	선택 요소들을 새 요소로 교체합니다.

 

 

unwrap() / wrap() / wrapAll() /wrapInner() 메서드

---

unwrap() 메서드는 선택한 요소의 부모 요소를 삭제합니다.

wrap() 메서드는 선택한 요소를 각각 새 요소로 감쌉니다.

wrapAll() 메서드는 선택한 요소를 한꺼번에 새 요소로 감쌉니다.

wrapInner() 메서드는 선택한 요소릐 모든 하위 요소를 새 요소로 감쌉니다.

종류	설명
$("요소선택").unwrap();	선택한 요소의 부모 요소를 삭제합니다.
$("요소선택").wrap(새 요소);	선택한 요소를 새 요소로 감쌉니다.
$("요소선택").wrapAll(새 요소);	선택한 요소를 새 요소로 한꺼번에 감쌉니다.
$("요소선택").wrapInner(새 요소);	선택한 요소의 모든 하위 요소를 새 요소로 감쌉니다.

 

 

Post

---

• [제이쿼리] jQuery 속성조작 메서드
• [제이쿼리] jQuery 수치조작 메서드
• [제이쿼리] jQuery 객체편집 메서드

References

---

• 생활코딩: 선택자
• w3schools
• TCP school

 

---

잘못된 코드나 내용이 있다면 댓글을 남겨주세요. 즉시 수정하도록 하겠습니다! :)