[ jQuery ] Manipulation(조작)

 

내부 삽입

1) append(content)

모든 요소 내부에 컨텐츠를 추가한다.

e.g.

// p 태그에 내용 추가
$("p").append("<b>제이쿼리</b>");
		:
<p>중요과목: </p>

2) appendTo(content)

요소의 내용을 다른 요소에 추가한다.

e.g.

// body 마지막 부분에 제이쿼리 추가
$("<div><p>제이쿼리</p></div>").appendTo("body");

// id가 test인 태그의 뒷 부분에 아이디가 a인 태그의 내용을 추가
$("#a").appendTo("#test");
		:
<span id="a">제이쿼리</span>
<div id="test">중요과목 : </div>
//--==>> 중요과목 : 제이쿼리

3) prepend(content)

모든 요소 내부의 선두에 컨텐츠를 삽입

4) prependTo(content)

요소의 내용을 다른 요소에 추가한다.

 

외부 삽입

1) after(content)

각 요소의 뒤로 컨텐츠를 삽입한다.

$("p").after("<b>강조!</b>");

2) before(content)

각 요소의 앞에 컨텐츠를 삽입한다.

3) insertAfter(content)

요소를 지정한 다른 요소의 뒤에 삽입한다.

4) insertBefore(content)

요소를 지정한 다른 요소의 앞에 삽입한다.

// 아이디가 a 인 요소 앞에 <p>콘텐츠</p> 삽입
$("<p>콘텐츠</p>").insertBefore("#a");

 

주위에 삽입

1) wrap(html)

각 요소를 구조적으로 지정 HTML로 둘러싼다.

e.g.

// p 요소를 지정 div로 둘러싼다.
$("p").wrap("<div class='wrap'></div>");
		:
<p>Test</p>

2) wrap(elem)

지정 요소를 실행 요소로 둘러싼다.

e.g.

// p 요소를 "a" id의 요소로 둘러싼다.
$("p").wrap($('#a'));
		:
<p>Test</p><div id="a"></div>

3) wrapAll(html)

요소 집합을 정리하고, 지정된 HTML 안에 1개로 정리해 사이에 둔다.

4) wrapAll(elem)

wrapAll(html)과 같지만, HTML 문자열은 아니고 DOM Element 등을 지정한다.

5) wrapInner(html)

요소가 가지는 각자 요소(텍스트 포함)를 HTML 지정 요소로 둘러싼다.

6) wrapInner(elem)

요소가 가지는 각자 요소(텍스트 포함)를 지정 요소로 둘러싼다.

7) unwrap()

특정한 부모 요소를 제거한다.

e.g.

// <p>태그를 감싸고 있는 <div> 요소를 제거
$('p').unwrap();
		:
<div>
	<p>Foo</p>
</div>

 

치환

1) replaceWith(content)

각 요소를 지정 HTML 혹은 DOM Element로 옮겨 놓는다.

2) replaceAll(selector)

지정 조건에 맞는 요소를 모두 옮겨 놓는다.

 

삭제

1) empty()

요소 집합으로부터 모든 자식 요소를 삭제한다.

2) remove( [ expr ] )

DOM으로부터 지정 조건에 맞는 요소를 모두 삭제한다.

3) detach( [ selector ] )

데이터를 유지한 상태로 요소 제거

detach 메소드는 remove 메소드와 달리 해당 요소가 가진 데이터 요소를 파괴하지 않는다.

이 데이터는 jQuery 의 이벤트 시스템에 보존되어 있기 때문에 .data() 메소드 등을 사용하여 다시 호출할 수 있다.

재사용될만한 요소에만 사용하는 것이 중요!

DOM에서 요소를 제거하거나 추가할 일이 빈번하게 발생할 때 유용하게 사용 할 수 있다.

 

복사

1) clone()

DOM 요소를 복사해 새롭게 작성

2) clone(true)

DOM 요소를, 그 요소가 가지는 이벤트도 포함해 카피한다.