• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>jQuery Syntax</title>
7
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
8
    <script>
9
        function func() {
10
            addAttribute();     // 아이디가 "para"인 HTML 요소에 속성을 추가함.
11
            createElement();        // 아이디가 "para"인 HTML 요소를 생성함.
12
        }
13
        function createElement() {
14
            var criteriaNode = document.getElementById("text");
15
            var newNode = document.createElement("p")
16
            newNode.innerHTML = "새로운 단락입니다.";
17
            newNode.setAttribute("id", "para");
18
            document.body.insertBefore(newNode, criteriaNode);
19
        }
20
        function addAttribute() {
21
            document.getElementById("para").setAttribute("style", "color: red");
22
        }
23
    </script>
24
</head>
25
​
26
<body>
27
​
28
    <h1>아직 생성되지 않은 HTML 요소에 속성 추가</h1>
29
​
30
    <button onclick="func()">속성 추가!</button>
31
    <p id="text"></p>
32
33
</body>
34
​
35
</html>