/*
노드추가
문서에 노드를 추가하는 방법은 두개
appendChild(), insertBefore()
*/
/*
appendChild
appendChild 메소드는 요소노드에 새 자식노드를 추가
*/
//구문
reference = element.appendChild(newChild);
/*
새로운 자식 노드는 추가된 요소의 제일 마지막 자식요소가 된다.
이 메소드는 새로 추가된 노드 반환
주로 createElement, createTextNode 와 함께 쓰임
*/
//예제
var para = document.createElement("p");
var msg = document.createTextNode("안녕");
para.appendChild(msg);
var newpara = para.cloneNode(true);
//true 쓰면 자식텍스트 노드까지 복사, false는 p요소까지만 복사
/*
***
새로만든 요소를 문서에 붙이는것 말고도
appendChild는 문서 내에 있는 요소를 옮길때도 사용됨
***
*/
//예제
var msg = document.getElementById("findprint");
var container = document.getElementById("content");
container.appendChild(msg);
//fineprint 라는 id를 가진 요소는 문서트리에서 삭제되지만 content요소의 마지막 자식노드라는 새로운 위치로 복사된다.
/*
insertBefore
insertBefore메소드는 특정 요소의 자식 노드 앞에 새로운 노드를 추가
*/
//구문
reference = element.insertBefore(newNode, targetNode); // 새 노드인 newNode를 targetNode라는 노드 앞에 추가
/*
****
targetNode는 요소의 자식노드여야한다. targetNode가 정의 되어있지 않다면
newNode는 요소의 자식 노드 끝에 추가된다.
appendChild와 같은 결과를 수행하게 된다.
*****
*/
//예문
//content라는 id를 가진 요소 그안에 fineprint라는 id를 가진요소 존재 둘사이에 추가하는것.
var container = document.getElementById("content");
var msg = document.getElementById("findprint");
var para = document.createElement("p");
container.insertBefore(para,msg);
//para가 텍스트 노드도 포함하고있다면 그것들도 중간에 함께 포함됨.
//insertBefore는 새로 만든 노드를 추가하는 기능뿐 아니라 기존 노드를 문서내에서 이동하는 기능도 수행
/*
#content 는 #fineprint자식을 가짐, #headline는 문서의 특정위치에 있음 headline을 fineprint앞에 올수있도록 할수있음
*/
var container = document.getElementById("content");
var msg = document.getElementById("findprint");
var announce = document.getElementById("headline");
container.insertBefore(announce,msg);