jQuery/DOM&jQuery

jQuery DOM wrap 메소드 요소를 감싸기

샷타이거 2009. 11. 22. 13:26

jQuery wrap,wrapAll, wrapInner 메소드

앞서 포스팅 한 것은 한엘리먼트를 두고 앞이나 뒤에 생성하는 것이였다. 이번엔 아래그림과같이 한 엘리먼트를 놔두고 감싸는 엘리먼트를 만들어보자.


wrap 메소드

앞서 여러 생성 메소드를 학습했다면 쉽다.다음과 같다.

$('p').warp('


');
//$('내부에 엘리먼트').warp('외부엘리먼트');
$('p').warp('


');
//위와같이 아이디 설정도 가능하다.

위와 같이 해준다면 표현은 다음과 같이 나올것이다



어쩌고 저쩌고...........

주의 할 점은 두가지이다.

  • 인라인 엘리먼트로 블록엘리먼트를 감싸던지(ex)p엘리먼트를 img로)같은 엘리먼트를같은 엘리먼트로 감싼다던지(ex)p를p로 감싸기)이런 실수를 범하지 않는다.
  • 감싸는 엘리먼트에 텍스트가 포함된경우$('p').warp('<div>텍스트</div>');감쌀 엘리먼트 p의 내용은 무시된다

wrapAll 메소드

.wrap()는 지정한 엘리먼트를 일일이 감싸는 반면 .wrapAll()메소드는 ALL, 즉 한번에 다 감싸버린다.차이를 비교한 예제를 보자

감싸줘요.


나도요.


나도요2.


나도요3.

자...위와 같은 html이 있다고 하자 이때 두메소드의 차이점을 보면

$('p').warp('


');
$('p').warpAll('


');

결과는 다음과 같이 나온다



감싸줘요.






나도요.






나도요2.






나도요3.







감싸줘요.


나도요.


나도요2.


나도요3.

한번더 요약하면 warp은 개별로 일일이 감싸주는거고 wrapAll은 전체를 감싼다.

wrapInner 메소드

이 메소드는 대상 엘리먼트를 감싸는게 아니라 그 속성값(텍스트등..)과 하위 엘리먼트를 감싼다. 그래서 Inner이란 말이 붙은것. 예제를 보자

어쩌고 저쩌고




어쩌고 저쩌고

html이 위와 같고...

$('p').warp('');
//p엘리먼트 안에서 b엘리먼트로 감싸준다.
$('alpha#div').warp('


');
//alpha란 아이디의 div엘리먼트안에서 div엘리먼트로 감싼다.

결과는 아래와 같다

어쩌고 저쩌고






어쩌고 저쩌고

주의할점

감싼다는것은 지정한 엘리먼트를 다른 엘리먼트안에 넣는다는 것이다.여기서 인라인과 블록 엘리먼트를 유의할 필요있다. 블록을 인라인엘이먼트로 감싼다면 잘못된것이다.또 같은 엘리먼트로 감싸도 잘못된것이다(물론 div말고..)

마지막으로 적용된예제를 보려면 여기서보자http://sianasiatiger.cafe24.com/study/D_wrap.html

저작자표시