• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>JavaScript Node Manage</title>
7
</head>
8
​
9
<body>
10
​
11
    <h1>appendChild() 메소드</h1>
12
    <h2 id="item">JavaScript</h2>
13
    <div id="list">
14
        <p>HTML</p>
15
        <p>CSS</p>
16
        <p>JQuery</p>
17
    </div>
18
    <button onclick="appendNode()">노드 추가!</button>
19
20
    <script>
21
        function appendNode() {
22
            var parent = document.getElementById("list");   // 아이디가 "list"인 요소를 선택함.
23
            var newItem = document.getElementById("item");  // 아이디가 "item"인 요소를 선택함.
24
            parent.appendChild(newItem);                    // 해당 요소의 맨 마지막 자식 노드로 추가함.
25
        }
26
    </script>
27
28
</body>
29
​
30
</html>