• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>XML Node</title>
7
    <script>
8
        function loadDoc() {
9
            var xmlHttp = new XMLHttpRequest();
10
            xmlHttp.onreadystatechange = function() {
11
                if(this.status == 200 && this.readyState == this.DONE) {
12
                    addData(xmlHttp);
13
                }
14
            };
15
            xmlHttp.open("GET", "/examples/media/programming_languages.xml", true);
16
            xmlHttp.send();
17
        }
18
​
19
        function addData(xmlHttp) {
20
            var xmlObj, javaName;
21
            xmlObj = xmlHttp.responseXML;
22
            javaName = xmlObj.getElementsByTagName("name")[2].firstChild;   // 세 번째 <name>요소의 텍스트 노드를 반환함.
23
            originTextData = javaName.nodeValue;    // 원본 텍스트 데이터
24
​
25
            document.getElementById("text").innerHTML = "변경 전 : " + javaName.nodeValue + "<br>";
26
​
27
            javaName.insertData(1, "Script");       // 텍스트 데이터의 두 번째 문자 위치에 "Script"를 추가함.
28
            document.getElementById("text").innerHTML += "<br>변경 후 : " + javaName.nodeValue + "<br>";
29
            javaName.nodeValue = originTextData;    // 텍스트 데이터 원상 복구
30
​
31
            javaName.insertData(2, "Script");       // 텍스트 데이터의 세 번째 문자 위치에 "Script"를 추가함.
32
            document.getElementById("text").innerHTML += "<br>변경 후 : " + javaName.nodeValue + "<br>";
33
            javaName.nodeValue = originTextData;    // 텍스트 데이터 원상 복구
34
​
35
            javaName.insertData(3, "Script");       // 텍스트 데이터의 네 번째 문자 위치에 "Script"를 추가함.
36
            document.getElementById("text").innerHTML += "<br>변경 후 : " + javaName.nodeValue + "<br>";
37
            javaName.nodeValue = originTextData;    // 텍스트 데이터 원상 복구
38
​
39
            javaName.insertData(4, "Script");       // 텍스트 데이터의 다섯 번째 문자 위치에 "Script"를 추가함.
40
            document.getElementById("text").innerHTML += "<br>변경 후 : " + javaName.nodeValue;
41
        }
42
    </script>
43
</head>
44
​
45
<body>
46
​
47
    <h1>데이터의 추가</h1>
48
    <button onclick="loadDoc()">데이터 추가!</button>
49
    <p id="text"></p>
50
51
</body>
52
​
53
</html>