HTML의 자식 요소 제거 방식

 어떻게 요소를 제거하세요?

미션을 진행하면서 요소를 제거해야 할 일이 종종 있다.
innerHTML을 이용해 해당 요소를 제거하는 것이 보편적인 방법이지만
이번에 새로운 방법을 알게 돼 이에 대해 소개하고, innerHTML로 제거하는 것과의 차이점을 이야기해보려고 한다.

 

innerHTML과 removeChild

먼저 자주 사용하는 innerHTML로 요소를 제거하는 방법은 이와 같다.

 

target.innerHTML = ‘’;

 

반면, 새로운 방법은 while문을 사용해 첫 번째 자식이 없을 때까지 지우는 방식이다.
코드로 보면 이런 모습이다.

 

while(target.firstChild){
  target.removeChild(target.firstChild);

 

이번 미션에서는 레스토랑 리스트를 업데이트할 때 사용했다.
ul 태그 안에 있는 list를 하나씩 다 돌면서 차례로 삭제해 주는 것이다.
결국 첫 번째 자식이 없을 때까지니까 전체 리스트를 다 날려준다고 보면 된다.

 

차이점

그럼 한 줄이면 끝날 innerHTML을 두고 왜 저 코드를 쓰는 걸까?
둘의 차이점을 살펴보자.
간단한 비교를 위해 innerHTML, removeChild로 이름을 축약해서 설명해 보겠다.

 

첫째, innerHTML은 해당 요소를 내용을 비우고, removeChild는 자식 요소들만 제거한다.

innerHTML은 해당 요소의 내용을 통으로 지운다. 따라서 자식 요소를 포함한 모든 내용을 삭제한다. 

반면, removeChild는 해당 요소의 자식 요소만 제거한다.

 

둘째, innerHTML은 문자열을 파싱 하고, 속도가 느리고, removeChild는 DOM을 직접 조작하고 속도가 빠르다.

innerHTML은 문자열을 사용해 DOM을 조작한다. 따라서 HTML 문자열을 파싱해 새로운 DOM을 만드는 작업이 포함되어, 불필요한 작업이 생긴다. 따라서 DOM에서 삭제하는 removeChild는 innerHTML보다 약 60% 빠른 성능을 보인다.

따라서 자식 요소의 제거를 위해서는 removeChild 방식을 추천하지만, 요소의 내용을 비우거나 등 상황에 따라서 InnerHTML로 유연하게 사용하자.

 

참고자료

https://rusingh.com/javascript-benchmark-removechild-vs-innerhtml/