©TCP-tryWWW

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>XML Node</title>
	<script>
		function loadDoc() {
			var xmlHttp = new XMLHttpRequest();
			xmlHttp.onreadystatechange = function() {
				if(this.status == 200 && this.readyState == this.DONE) {
					createNode(xmlHttp);
				}
			};
			xmlHttp.open("GET", "/examples/media/programming_languages.xml", true);
			xmlHttp.send();
		}

		function createNode(xmlHttp) {
			var xmlObj, thirdLang, newNode, newTextNode, node, result, idx;
			xmlObj = xmlHttp.responseXML;	// 요청한 데이터를 XML DOM 객체로 반환함.
			thirdLang = xmlObj.getElementsByTagName("language")[2];	// 세 번째 <language>요소를 반환함.

			// 변경 전
			node = thirdLang.firstChild;
			result = "변경 전 : <br>";
			for(idx = 0; idx < thirdLang.childNodes.length; idx++) {
				if(node.nodeType == 1) {
					result += node.nodeName + " : " + node.firstChild.nodeValue + "<br>";
				}
				node = node.nextSibling;
			}
			
			newNode = xmlObj.createElement("paradigm");			// 새로운 <paradigm>요소를 생성함.
			newTextNode = xmlObj.createTextNode("객체 지향");	// 새로운 텍스트 노드를 생성함.
			newNode.appendChild(newTextNode);					// <paradigm>요소에 텍스트 노드를 추가함.
			thirdLang.appendChild(newNode);						// 세 번째 <language>요소에 새로운 요소를 추가함.
			
			// <language>요소의 자식 요소 노드를 모두 출력함.
			node = thirdLang.firstChild;
			result += "<br>변경 후 : <br>";
			for(idx = 0; idx < thirdLang.childNodes.length; idx++) {
				if(node.nodeType == 1) {
					result += node.nodeName + " : " + node.firstChild.nodeValue + "<br>";
				}
				node = node.nextSibling;
			}
			document.getElementById("text").innerHTML = result;
		}
	</script>
</head>

<body>

	<h1>노드의 생성</h1>
	<button onclick="loadDoc()">텍스트 노드 생성!</button>
	<p id="text"></p>
	
</body>

</html>