XML DOM appendChild() 메서드

Node 객체 참조 매뉴얼

정의와 사용법

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 브라우저 장절.

Node 객체 참조 매뉴얼