돔에서 노드를 지울려면 여러 과정을 거쳐야 한다. 우선 지움의 대상이 되는 노드를 선택한 후 parentNode를 사용해 그의 부모를 선택하고 지움의 대상이 되는 노드를 인자로 넘겨서 노드를 지운다.
1
2
|
var divA = document.getElementById('A');
divA.parentNode.removeChild(divA);
|
cs |
replaceChild()의 경우 리시버 객체는 부모, 첫번째 인자는 새로운 노드, 두번째 인자는 바꿈의 대상이 되는 노드를 넘기면 된다.
1
2
3
4
|
var divA = document.getElementById('A');
var newSpan = document.createElement('span');
newSpan.textContent = 'Howdy';
divA.parentNode.replaceChild(newSpan,divA);
|
cs |
어떤 대상을 지우거나 대체함에 따라 innerHTML, outerHTML, textContent 프로퍼티를 사용하는 편이 더 쉽고 빠를 수 있다. 하지만 메모리 누수를 주의해야 한다.
replaceChild()와 removeChild()는 대체된, 삭제된 노드를 반환한다. 하지만 이 노드들은 단지 현재의 라이브 문서에서만 사라졌을 뿐 이 노드들에 대한 참조는 여전히 존재한다.
출처 - DOM Elightment
-
Previous
1.10 Using appendChild() and insertBefore() to Add Node Objects to the DOM -
Next
1.12 Using cloneNode() to Clone Nodes