HTML DOM 엘리먼트 생성 및 삭제 createElement() removeChild()

1. createElement()

HTML DOM Element 를 동적으로 생성하기위해 사용하는 함수입니다.

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);

var element = document.getElementById("div1");
element.appendChild(para);
</script>

2. removeChild()

HTML DOM Element 를 동적으로 삭제하기 위해 사용하는 함수입니다. 

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

이때, Parent 를 찾은 후에 Child 를 찾아서 지우기 귀찮을경우, 아래와 같이 꼼수를 쓰기도 합니다.

var child = document.getElementById("p1");

child.parentNode.removeChild(child);

 

아울러, jQuery  에서도 아래와 같이 remove 함수를 제공합니다.

$("#div1").remove();