Day 46 : HTML 문서의 동적 구성

pancakemaker 2021. 12. 21. 16:54

1. DOM 객체 동적 생성 : document.createElement()

var newDIV = document.createElement("div");

newDIV.innerHTML = "새로 생성된 DIV입니다.";

newDIV.setAttribute("id", "myDiv");
newDIV.style.backgroundColor = "yellow";

2. DOM 트리에 삽입 : appendChild()

부모.appendChild(DOM객체);		//DOM 객체를 부모의 마지막 자식으로 삽입
부모.insertBefore(DOM객체 [, 기준자식]);	//DOM 객체를 부모의 자식 객체 중 기준자식 앞에 삽입

var p = document.getElementById("p");		//<p "id=p"> 태그의 DOM 객체 찾기
p.appendChild(newDiv);

3. DOM 객체의 삭제 : removeChild()

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

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

<예시>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>문서의 동적 구성</title>
	<script>
		function createDIV() {
			var obj = document.getElementById("parent");
			var newDIV = document.createElement("div");
			newDIV.innerHTML = "새로 생성된 DIV 입니다.";
			newDIV.setAttribute("id", "myDiv");
			newDIV.style.backgroundColor = "yellow";
			newDIV.addEventListener("click",
					function () {
						var p = this.parentElement;	//부모 HTML 태그 요소
						p.removeChild(this);		//자신을 부모로부터 제거
					});
			obj.appendChild(newDIV);
		}
	</script>
</head>
<body id="parent">
	<h3>DIV 객체를 동적으로 생성, 삽입, 삭제하는 예제</h3>
	<hr>
	<p>DOM 트리에 동적으로 객체를 삽입할 수 있습니다.
		createElement(), appendChild(), removeChile() 메소드를 이용하여 새로운 객체를 생성, 삽입, 삭제하는 예제입니다.</p>
	<a href="javascript:createDIV()">DIV 생성</a><p><p>
</body>
</html>