XML DOM appendChild() 메서드
정의와 사용법
appendChild() 메서드는 노드의 자식 노드 목록의 끝에 새 자식 노드를 추가할 수 있습니다.
이 메서드는 이 새로운 자식 노드를 반환할 수 있습니다.
문법:
appendChild(newchild)
매개변수 | 설명 |
---|---|
newchild | 추가된 노드 |
반환 값
추가된 노드
설명
이 메서드는 노드 newchild를 문서에 추가하고, 그것을 현재 노드의 마지막 자식 노드로 만듭니다.
만약 문서 트리에 newchild가 이미 존재하면, 그것은 문서 트리에서 제거되고, 그 새로운 위치에 다시 삽입됩니다. 만약 newchild가 DocumentFragment 노드라면, 그것은 직접 삽입되지 않으며, 그 자식 노드들은 현재 노드의 childNodes[] 배열의 끝에 순서대로 삽입됩니다.
주의하세요, 하나의 문서에서의 노드(또는 하나의 문서에서 생성된 노드)는 다른 문서에 삽입될 수 없습니다. 즉, newchild의 ownerDocument 속성은 현재 노드의 ownerDocument 속성과 같아야 합니다.
예제
아래의 함수는 문서의 끝에 새段落을 추가합니다:
function appendMessage (message) { var pElement = document.createElement("p"); var messageNode = document.createTextNode(message);pElement.appendChild(messageNode);
document.body.appendChild(pElement);
}
예제
모든 예제에서 우리는 XML 파일을 사용할 것입니다 books.xml또한 JavaScript 함수 loadXMLDoc()。
아래의 코드 스니펫은 첫 번째 <book> 요소에 노드를 추가하고, 첫 번째 <book> 요소의 모든 자식 노드를 출력할 수 있습니다:
xmlDoc=loadXMLDoc("books.xml");
var newel=xmlDoc.createElement('edition');
var newtext=xmlDoc.createTextNode('First');
newel.appendChild(newtext);
var x=xmlDoc.getElementsByTagName('book')[0];
x.appendChild(newel);
;
var y=x.childNodes;
for (var i=0;i<y.length;i++)
{
//Display only element nodes
if (y[i].nodeType==1)
{
document.write(y[i].nodeName);
document.write("<br />");
}
}
출력:
title author year price edition
주의사항:Internet Explorer는 노드 간에 생성된 공백 텍스트 노드(예: 엔터 키)를 무시하며, Mozilla는 이렇게 하지 않습니다. 따라서 아래의 예제에서는 단지 요소 노드(요소 노드의 nodeType=1)를 처리합니다.
ヒント:IE와 Mozilla 브라우저 간 XML DOM의 차이에 대한 더 많은 내용을 원하시면, 우리의 DOM 브라우저 장절.