.wrapAll()

1 개요
2 문법
3 예제 1
4 예제 2
5 참고

개요

.wrapAll()은 선택한 요소 모두를 새로운 태그로 감쌉니다.

문법

.wrapAll( wrappingElement )

예를 들어 다음은 모든 p 요소를 모아서 div 태그로 감쌉니다.

$( 'p' ).wrap( '<div></div>' );

예제 1

.wrap()은 선택한 요소에 각각 적용됩니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      div {
        color: red;
      }
    </style>
    <script src="//code.jquery.com/jquery-3.3.1.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'p' ).wrap( '<div></div>' );
      } );
    </script>
  </head>
  <body>
    <p>Lorem ipsum dolor.</p>
    <h1>Lorem ipsum dolor.</h1>
    <p>Lorem ipsum dolor.</p>
  </body>
</html>

즉, 다음처럼 만듭니다.

<div>
  <p>Lorem ipsum dolor.</p>
</div>
<h3>Lorem ipsum dolor.</h3>
<div>
  <p>Lorem ipsum dolor.</p>
</div>

.wrapAll()은 선택한 요소를 모아서 하나의 태그로 둘러쌉니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      div {
        color: red;
      }
    </style>
    <script src="//code.jquery.com/jquery-3.3.1.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'p' ).wrapAll( '<div></div>' );
      } );
    </script>
  </head>
  <body>
    <p>Lorem ipsum dolor.</p>
    <h3>Lorem ipsum dolor.</h3>
    <p>Lorem ipsum dolor.</p>
  </body>
</html>

즉, 다음처럼 만듭니다.

<div>
  <p>Lorem ipsum dolor.</p>
  <p>Lorem ipsum dolor.</p>
</div>
<h3>Lorem ipsum dolor.</h3>

예제 2

.wrapAll()은 하위 요소 모두를 새로운 태그로 감쌀 때 유용하게 사용할 수 있습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      .red {
        color: red;
      }
    </style>
    <script src="//code.jquery.com/jquery-3.3.1.js"></script>
    <script>
      $( document ).ready( function() {
        $( '.wa' ).contents().wrapAll( '<div class="red"></div>' );
      } );
    </script>
  </head>
  <body>
    <div class="wa">
      <h1>Lorem ipsum dolor.</h1>
      <p>Lorem ipsum dolor.</p>
      <p>Lorem ipsum dolor.</p>
    </div>
  </body>
</html>

즉, 다음처럼 만듭니다.

<div class="wa">
  <div class="red">
    <h3>Lorem ipsum dolor.</h3>
    <p>Lorem ipsum dolor.</p>
    <p>Lorem ipsum dolor.</p>
  </div>
</div>

참고

선택한 요소의 상위 태그를 제거할 때는 .unwrap()을 사용합니다.

jQuery / Reference / .width()

.width()는 선택한 요소의 가로 크기를 반환하거나, 가로 크기를 변경합니다.

jQuery / Reference / .add()

개요 .add()는 어떤 요소를 추가로 선택할 때 사용합니다. 문법 .add( selector ) 예를 들어 다음은 ul 요소를 선택하고, 추가로 p 요소를 선택합니다. $( 'ul' ).add( 'p' ) 예제 1 li 요소를 선택하고, 추가로 p 요소를 선택한 후 색을 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> ...

jQuery / Reference / :contains()

:contains()는 특정 문자열을 포함한 요소를 선택하는 선택자입니다. 문자열 포함 여부를 따질 때 대소문자를 구분한다는 점에 주의합니다.

jQuery / Reference / .append()

개요 .append()는 선택한 요소의 내용의 끝에 콘텐트를 추가합니다. 문법 .append( content ) 예제 1 순서 없는 목록 마지막에 Dolor를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { line-height: ...

jQuery / Reference / .slideDown()

개요 .slideDown()은 선택한 요소를 아래쪽으로 서서히 나타나게 합니다. 문법 .slideDown( ) duration 요소가 나타날 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 나타나는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 나타난 후 수행할 작업을 정합니다. 예제 1 버튼을 클릭하면 파란색 배경의 div ...

jQuery / Reference / .insertAfter()

개요 .insertAfter()는 특정 요소 뒤에 요소를 추가하거나 이동시킵니다. 문법 .insertAfter( target ) 예제 1 h1 요소 뒤에 <p>World</p>를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { font-family: Consolas, monospace; ...

jQuery / Reference / .removeAttr()

개요 .removeAttr()은 선택한 요소의 특정 속성을 제거합니다. 문법 .removeAttr( attributeName ) 예를 들어 아래는 h1 요소에서 title 속성을 제거합니다. $( 'h1' ).removeAttr( 'title' ); 예제 버튼을 클릭하면 input 요소의 placeholder 속성을 제거합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> * { ...

jQuery / Reference / .prepend()

개요 .prepend()는 선택한 요소의 내용의 앞에 콘텐트를 추가합니다. 문법 .prepend( content ) 예제 1 순서 없는 목록 처음에 Dolor를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { line-height: ...

jQuery / Reference / .unwrap()

개요 .unwrap()은 선택한 요소의 상위 태그를 제거합니다. 문법 .unwrap() 예를 들어 다음은 h1 요소의 바로 상위의 태그를 제거합니다. $( 'h1' ).unwrap(); 예제 버튼을 크릭하면 h1 요소의 상위 태그인 div 태그를 제거합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> div { ...

jQuery / Reference / .appendTo()

개요 .appendTo()는 선택한 요소를 다른 요소의 종료 태그 앞으로 이동시킵니다. 문법 .appendTo( target ) 예제 abc를 클래스 값으로 가지는 span 요소를 h1 요소의 </h1> 앞으로 이동시킵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { ...