[jQuery] 객체 편집 메서드

#  해당 요소의 이전 위치에 요소 추가

$("기존_요소").before($("추가할_요소"));

// 또는

$("기존_요소").before("<tag> ... </tag>");

#  해당 요소의 다음 위치에 요소 추가

$("기존_요소").after($("추가할_요소"));

// 또는

$("기존_요소").after("<tag> ... </tag>");

 

---

#  해당 요소 내부의 처음 위치에 요소 추가

$("요소").prepend($("추가할_요소"));

#  해당 요소 내부의 마지막 위치에 요소 추가

$("요소").append($("추가할_요소"));

 

---

#  해당 객체 복제

$("요소").clone(true|false);

  - true : 하위 요소까지 모두 복제

  - false : 선택한 요소만 복제

  - clone() 없이 다른 요소에 append 등을 실행하면 잘라내기+붙여넣기로 작동함

     → 복사+붙여넣기를 원한다면 $("요소").append($("추가할_요소").clone());

 

 

---

#  해당 요소 삭제

$("요소").remove();

#  해당 요소의 하위 요소 삭제

$("요소").empty();

#  해당 요소의 부모 요소 삭제

$("요소").unwrap();

 

---

#  해당 요소를 새 요소로 교체

$("새_요소").replaceAll("기존_요소");

// 또는

$("기존_요소").replaceWith("새_요소");

 

---

#  해당 요소를 새 요소로 감싸기

$("기존_요소").wrap("감쌀_요소");

// ex: $("p").wrap("<div />"); -> <div><p> ... </p></div>

 

#  해당 요소 무리 전체를 새 요소로 한꺼번에 감싸기

$("기존_요소").wrapAll("감쌀_요소");

// ex: <div> <p> ... </p> <p> ... </p> </div>

#  해당 요소의 텍스트를 새 요소로 감싸기

$("기존_요소").wrapInner("감쌀_요소");

// ex: <p> <span> p의 텍스트 </span> </p>