[JavaScript] 3. 문서 객체 모델 - DOM 노드 삽입과 삭제

DOM 노드의 삽입

새로운 요소의 삽입

　▷ 텍스트가 있는 새 요소의 삽입 과정

　　 ＊추가하려는 새로운 요소를 생성

　　　 ☞ var 새요소변수 = document.createElement("요소명");

　　 ＊텍스트 내용이 있는 경우 텍스트 노드를 생성
　　　 ☞ var 텍스트노드변수 = document.createTextNode("텍스트내용");
　　 ＊생성된 텍스트 노드를 새로운 요소의 자식 요소로 연결
　　　 ☞ 새요소변수.appendChild(텍스트노드변수);
　　 ＊새 요소가 추가될 부모 요소를 찾아 자식 요소로 연결
　　　 ☞ var 부모요소변수 = document.getElementById("부모_아이디명");
　　　 ☞ 부모요소변수.appendChild(새요소변수);

　▷ 속성이 있는 새 요소의 삽입 과정
　　 ＊추가하려는 새로운 요소를 생성

　　　 ☞ var 새요소변수 = document.createElement("요소명");

　　 ＊새로운 속성을 생성한 후, 속성값을 지정

　　　 ☞ var 속성노드변수 = document.createAttribute("속성명");

　　　 ☞ 속성노드변수.value ="속성값";

　　 ＊생성된 속성 노드를 새로운 요소에 추가

　　　 ☞ 새요소변수.setAttributeNode(속성노드변수);

　　 ＊새 요소가 추가될 부모 요소를 찾아 자식 요소로 연결

　　　 ☞ document.getElementById("부모_아이디명").appendChild(새요소변수);

새로운 요소의 삽입_텍스트 노드를 갖는 경우

새로운 요소의 삽입_속성 노드를 갖는 경우

기존 요소의 삭제

　▷ 삭제 과정
　　 ＊DOM 구조에서 삭제하려는 노드의 부모 노드를 찾음

　　 ＊removeChild() 메서드 적용

　　　 부모노드.removeChild(삭제할 노드);