jQuery / Reference / .wrap()

.wrap()은 선택한 요소 각각을 별도의 HTML 구조로 감쌉니다. 두 요소를 선택했다면 일반적으로 두 개의 감싸는 구조가 생기며, 모두를 하나로 묶는 .wrapAll()과 다릅니다.

문법과 적용 범위

$(".item").wrap("<div class='group'></div>");
$(".item").wrap("<div class='outer'><div class='inner'></div></div>");

감싸는 구조는 HTML 문자열, DOM 요소, jQuery 객체 또는 선택자로 지정할 수 있습니다. 여러 요소를 가진 jQuery 객체나 선택자를 전달하면 첫 요소를 사용합니다. 중첩 구조도 가능하지만 선택한 요소가 들어갈 가장 안쪽 요소는 하나로 정하세요. 반환값은 감싸는 새 부모가 아니라 원래 선택 집합입니다.

jQuery 공식 문서의 .wrap() 정의와 인수에서 다른 호출 형태도 확인할 수 있습니다.

전체 실행 예제

아래 코드를 UTF-8 형식의 example.html 파일로 저장한 뒤 브라우저로 여세요. 예제는 jQuery 4.0.0 일반 빌드를 외부 주소에서 불러오므로 인터넷 연결이 필요합니다. 문서가 준비된 뒤 실행하도록 $(function () { ... }) 안에 코드를 작성했습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery wrap 예제</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.6; }
    .marked { background: #fff0b3; border: 2px solid #835b00; }
    .active { color: #a00000; font-weight: bold; }
    button, input, select { font: inherit; }
    #output { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<div id="container">
  <p class="item">첫 문단</p>
  <p class="item">둘째 문단</p>
</div>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      $(".item").wrap("<div class='group marked'></div>");
      $("#output").text("부모 수: " + $("#container > .group").length +
        " / 각 부모의 문단 수: " + $(".group").map(function () { return $(this).children("p").length; }).get().join(", "));
    });
  </script>
</body>
</html>

실행 결과 확인

각 문단에 별도의 테두리가 생기고 결과는 부모 수: 2 / 각 부모의 문단 수: 1, 1입니다. Elements에서 container 아래에 group 두 개가 있고 그 안에 각각 문단이 들어 있는지 확인할 수 있습니다.

사용할 때 주의할 점

• 같은 코드를 다시 실행하면 부모가 중첩해서 추가됩니다. 동적으로 반복 실행할 때는 이미 원하는 부모를 가졌는지 먼저 확인하세요.
• 감싸는 HTML에 같은 id를 지정하면 여러 부모가 중복 id를 갖게 됩니다. 반복 구조에는 클래스를 사용하세요.
• 감싸는 태그는 문서 구조상 자식을 담을 수 있어야 합니다. 문단 전체를 span이나 다른 p로 감싸는 등 부적절한 중첩을 피하세요.
• 모든 요소를 한 부모에 모으려면 .wrapAll()을 사용하고, 만든 부모만 풀려면 자식에서 .unwrap(".group")을 호출합니다.

용도를 비교하려면 .wrapAll()로 한 구조에 모으기, .unwrap()으로 부모 제거하기을 참고하세요.