[JavaScript] HTML 문서의 동적 구성

HTML 문서의 로드가 완료된 document에도 새로운 HTML 태그를 추가할 수 있다. 이를 위해서는 'DOM 객체 동적 생성 → DOM 트리에 삽입'하는 과정을 거친다. DOM 객체를 삭제할 수도 있다.

 

DOM 객체 동적 생성

var newDIV = document.createElement("div");		// <div> 태그를 새로 추가
newDIV.innerHTML = "새로 생성된 DIV입니다.";	 // <div> 태그에 HTML 텍스트 삽입
newDIV.setAttribute("id", "myDiv");
newDIV.style.backgroundColor = "yellow";

↓↓↓↓

<!-- 아래와 같은 html 태그가 새로 생기는 것과 같다 -->
<div id="myDiv" style="background-color:yellow">
	새로 생성된 DIV입니다.
</div>

 

 

DOM 트리에 삽입

/* DOM 객체를 부모의 마지막 자식으로 삽입 */
부모.appendCild(DOM객체);

/* DOM 객체를 부모의 자식 객체 중 기준자식 앞에 삽입 */
부모.insertBefore(DOM객체 [, 기준자식]);

var ol = document.getElementsByTagName("ol");
ol.appendChild(newDiv);

 

 

DOM 객체의 삭제

var removedObj = 부모.removeChild(떼어내고자 하는 자식 객체);

var myDiv = document.getElementById("myDiv");
var parent = myDiv.parentElement;		// 부모 객체 알아내기
parent.removeChild(myDiv);				// 부모로부터 myDiv 객체 떼어내기