• 코드:
​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>insertBefore() 메소드</h1>
12
    <h2 id="item">JavaScript</h2>
13
    <div id="list">
14
        <p>HTML</p>
15
        <p id="criteria">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 criteriaItem = document.getElementById("criteria"); // 아이디가 "criteria"인 요소를 선택함.
24
            var newItem = document.getElementById("item");          // 아이디가 "item"인 요소를 선택함.
25
            parent.insertBefore(newItem, criteriaItem);             // 해당 노드를 기준이 되는 자식 노드의 바로 앞에 추가함.
26
        }
27
    </script>
28
29
</body>
30
​
31
</html>