• 코드:
​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>요소 노드의 생성</h1>
12
    <p id="text">새로운 단락을 생성하여 이 단락 앞에 추가할 것입니다.</p>
13
    <button onclick="createNode()">요소 노드 생성!</button>
14
​
15
    <script>
16
        function createNode() {
17
            var criteriaNode = document.getElementById("text"); // 기준이 되는 요소로 아이디가 "text"인 요소를 선택함.
18
            var newNode = document.createElement("p");          // 새로운 <p> 요소를 생성함.
19
            newNode.innerHTML = "새로운 단락입니다.";
20
            document.body.insertBefore(newNode, criteriaNode);  // 새로운 요소를 기준이 되는 요소 바로 앞에 추가함.
21
        }
22
    </script>
23
24
</body>
25
​
26
</html>