• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>JavaScript Node Handle</title>
7
</head>
8
​
9
<body>
10
​
11
    <h1>요소 노드의 교체</h1>
12
    <div id="parent">
13
        <p id="first">첫 번째 요소입니다.</p>
14
        <p>두 번째 요소입니다.</p>
15
    </div>
16
    <p id="third">세 번째 요소입니다.</p>
17
    <button onclick="changeNode()">요소 노드 교체!</button>
18
​
19
    <script>
20
        var parent = document.getElementById("parent"); // 부모 노드를 선택함.
21
        var first = document.getElementById("first");
22
        var third = document.getElementById("third");
23
        function changeNode() {
24
            parent.replaceChild(third, first);          // first 요소를 삭제하고, 그 대신 third 요소를 삽입함.
25
        }
26
    </script>
27
28
</body>
29
​
30
</html>