1.11 Using removeChild() and replaceChild() to Remove and Replace Nodes

  돔에서 노드를 지울려면 여러 과정을 거쳐야 한다. 우선 지움의 대상이 되는 노드를 선택한 후 parentNode를 사용해 그의 부모를 선택하고 지움의 대상이 되는 노드를 인자로 넘겨서 노드를 지운다.

var divA = document.getElementById('A'); 
divA.parentNode.removeChild(divA);

  replaceChild()의 경우 리시버 객체는 부모, 첫번째 인자는 새로운 노드, 두번째 인자는 바꿈의 대상이 되는 노드를 넘기면 된다.

 

var divA = document.getElementById('A');
var newSpan = document.createElement('span'); 
newSpan.textContent = 'Howdy';
divA.parentNode.replaceChild(newSpan,divA);

  어떤 대상을 지우거나 대체함에 따라 innerHTML, outerHTML, textContent 프로퍼티를 사용하는 편이 더 쉽고 빠를 수 있다. 하지만 메모리 누수를 주의해야 한다.

  replaceChild()와 removeChild()는 대체된, 삭제된 노드를 반환한다. 하지만 이 노드들은 단지 현재의 라이브 문서에서만 사라졌을 뿐 이 노드들에 대한 참조는 여전히 존재한다.

 

출처 - DOM Elightment