• 코드:
​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
    <script>
9
        $(function() {
10
            $("#firstBtn").on("click", function() {
11
                // id가 "list"인 요소의 맨 마지막에 id가 "firstItem"인 요소를 추가함.
12
                $("#firstItem").appendTo("#list");
13
            });
14
            $("#secondBtn").on("click", function() {
15
                // id가 "list"인 요소의 맨 마지막에 id가 "secondItem"인 요소를 추가함.
16
                $("#secondItem").appendTo("#list");
17
            });
18
            $("#thirdBtn").on("click", function() {
19
                // id가 "list"인 요소의 맨 마지막에 id가 "thirdItem"인 요소를 추가함.
20
                $("#thirdItem").appendTo("#list");
21
            });
22
        });
23
    </script>
24
</head>
25
​
26
<body>
27
​
28
    <h1>.appendTo() 메소드</h1>
29
    <p>아래 버튼들을 왼쪽에서부터 차례대로 눌러보세요!</p>
30
    <ul id="list">
31
        <li id="firstItem">첫 번째 아이템이에요!</li>
32
        <li id="secondItem">두 번째 아이템이에요!</li>
33
        <li id="thirdItem">세 번째 아이템이에요!</li>
34
    </ul>
35
    <button id="firstBtn">첫 번째 아이템 추가</button>
36
    <button id="secondBtn">두 번째 아이템 추가</button>
37
    <button id="thirdBtn">세 번째 아이템 추가</button>
38
39
</body>
40
​
41
</html>