DOM 추가 노드
XML DOM 노드 추가
사용해 보기 - 예시아래 예에서는 books.xml XML 파일을 사용합니다.
외부 JavaScript에 있는 loadXMLDoc() 함수는 XML 파일을 로드하는 데 사용됩니다.
마지막 하위 노드 뒤에 노드 추가
이 예에서는 AppendChild() 메서드를 사용하여 기존 노드에 하위 노드를 추가합니다.
지정된 하위 노드 앞에 노드 추가
이 예제에서는 insertBefore() 메서드를 사용하여 지정된 하위 노드 앞에 노드를 삽입합니다.
새 속성 추가
이 예에서는 setAttribute() 메서드를 사용하여 새 속성을 추가합니다.
텍스트 노드에 데이터 추가
이 예제에서는 insertData()를 사용하여 기존 텍스트 노드에 데이터를 삽입합니다.
노드 추가 -appendChild()
appendChild() 메소드는 기존 노드에 하위 노드를 추가합니다.
기존 하위 노드 뒤에 새 노드가 추가(추가)됩니다.
참고: 노드의 위치가 중요한 경우 insertBefore() 메서드를 사용하세요.
다음 코드 조각은 요소(<edition>)를 생성하고 첫 번째 <book> 요소의 마지막 하위 노드 뒤에 추가합니다.
예
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js">
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
newel=xmlDoc.createElement("edition");
x=xmlDoc.getElementsByTagName("book")[0];
x.appendChild(newel);
document.write(x.getElementsByTagName("edition")[0].nodeName);
</script>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
인스턴스 설명:
loadXMLDoc()을 사용하여 "books.xml"을 xmlDoc에 로드
새 노드<edition> 만들기
이 노드를 첫 번째 <book> 요소에 추가합니다.
요소를 탐색하여 모든 <book> 요소에 추가합니다.
노드 삽입 - insertBefore()
insertBefore() 메소드는 지정된 하위 노드 앞에 노드를 삽입하는 데 사용됩니다.
이 방법은 추가되는 노드의 위치가 중요할 때 유용합니다:
Instance
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js">
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
newNode=xmlDoc.createElement("book");
x=xmlDoc.documentElement;
y=xmlDoc.getElementsByTagName("book");
document.write("Book elements before: " + y.length);
document.write("<br>");
x.insertBefore(newNode,y[3]);
y=xmlDoc.getElementsByTagName("book");
document.write("Book elements after: " + y.length);
</script>
</body>
</html>인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
예제 설명:
loadXMLDoc()을 사용하여 "books.xml"을 xmlDoc에 로드
새 요소 노드 만들기 < ;book>
마지막 <book> 요소 노드
insertBefore()의 두 번째 노드 앞에 이 새 노드를 삽입합니다. 매개변수가 null이면 새 노드는 마지막 기존 하위 노드 뒤에 추가됩니다.
x.insertBefore(newNode,null) 및 x.appendChild(newNode)는 모두 x에 새 하위 노드를 추가할 수 있습니다.
새 속성 추가
addAtribute() 이 메소드가 존재하지 않습니다.
속성이 존재하지 않는 경우 setAttribute()는 새 속성을 생성할 수 있습니다.
Instance
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js">
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("title");
x[0].setAttribute("edition","first");
document.write("Edition: ");
document.write(x[0].getAttribute("edition"));
</script>
</body>
</html>인스턴스 »
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요
예제 설명:
loadXMLDoc() 사용 "books.xml"을 로드하려면 xmlDoc
을 로드하고 첫 번째 <book> 요소의 "edition" 속성 값을 "first"
<로 설정(생성)합니다. 🎜>
참고: 속성이 이미 존재하는 경우 setAttribute() 메서드는 기존 값을 덮어씁니다.
텍스트 노드에 텍스트 추가 - insertData()insertData() 메서드는 기존 텍스트 노드에 데이터를 삽입합니다. insertData() 메소드에는 두 개의 매개변수가 있습니다:
- offset - 문자 삽입을 시작할 위치(0부터 시작)
- string - 삽입할 문자열
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js">
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
document.write(x.nodeValue);
x.insertData(0,"Easy ");
document.write("<br>");
document.write(x.nodeValue);
</script>
</body>
</html>인스턴스 실행»온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
