• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>jQuery Element Insert</title>
7
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
8
    <style>
9
        div { margin: 10px; }
10
        .content { border: 2px solid yellow; }
11
        .wrapper { border: 2px solid green; }
12
    </style>
13
    <script>
14
        $(function() {
15
            $("button").on("click", function() {
16
                // class가 "content"인 모든 요소를 포함하는 새로운 요소를 추가함.
17
                $(".content").wrapAll("<div class='wrapper'></div>");
18
            });
19
        });
20
    </script>
21
</head>
22
​
23
<body>
24
​
25
    <h1>.wrapAll() 메소드</h1>
26
    <div class="content">첫 번째 컨텐츠에요!</div>
27
    <div class="content">두 번째 컨텐츠에요!</div>
28
    <button>div 요소 추가</button>
29
30
</body>
31
​
32
</html>