DOM Node에 html 삽입 : insertAdjacentHTML vs innerHTML

대부분 Dom Tree 밑에 html을 삽입시 innerHTML을 삽입한다.

 

innerHTML

아래와 같은 html 안에

<ul id="detail_info_wrapper">
</ul>

아래처럼 넣기 위해서는

<ul class="detail_info_wrapper">
  <li class="info_grid"><strong>제품명</strong><p>${data.title}</p></li>
  <li class="info_grid"><strong>용량</strong><p>${data.capacity}</p></li>
</ul>

document.getElementById('detail_info_wrapper').innerHTML = 
'<li class="info_grid"><strong>제품명</strong><p>${data.title}</p></li>
<li class="info_grid"><strong>용량</strong><p>${data.capacity}</p></li>'

과 같은 과정이 필요하다, 문제는 innerHTML은 노드안의 HTML을 초기화 한다는 점이다. 

 

만약

<ul id="detail_info_wrapper">
  <li>**주의사항: 고온에 조심하세요</li>
</ul>

라는 소스에 

document.getElementById('detail_info_wrapper').innerHTML = 
'<li class="info_grid"><strong>제품명</strong><p>${data.title}</p></li>
<li class="info_grid"><strong>용량</strong><p>${data.capacity}</p></li>'

을 삽입하면

<ul class="detail_info_wrapper">
  <li class="info_grid"><strong>제품명</strong><p>${data.title}</p></li>
  <li class="info_grid"><strong>용량</strong><p>${data.capacity}</p></li>
</ul>

처럼 원래 있던 html 태그는 사라지게 된다. 이를 위해서 원래 안의 태그를 복사해서 새롭게 추가되는 html에 추가하는 방법이 있겠지만 사실

 

insertAdjacentHTML

 

메소드를 쓰면 간단히 해결되는 문제이다.

<ul id="detail_info_wrapper">
  <li>**주의사항: 고온에 조심하세요</li>
</ul>

라는 소스에

 

document.getElementById('detail_info_wrapper').insertAdjacentHTML = 
'<li class="info_grid"><strong>제품명</strong><p>${data.title}</p></li>'

document.getElementById('detail_info_wrapper').insertAdjacentHTML = 
'<li class="info_grid"><strong>용량</strong><p>${data.capacity}</p></li>'

를 삽입하면

 

<ul id="detail_info_wrapper">
  <li>**주의사항: 고온에 조심하세요</li>
  <li class="info_grid"><strong>제품명</strong><p>화장품</p></li>
  <li class="info_grid"><strong>용량</strong><p>10ml</p></li>
</ul>

과 같은 결과를 얻을 수 있다. 물론 삽입 위치도 다양하게 정할 수 있는데 (노드 아래의 첫번째, 마지막, 노드 형제요소 등)

 

https://developer.mozilla.org/ko/docs/Web/API/Element/insertAdjacentHTML

Element.insertAdjacentHTML() - Web API | MDN

의 공식 문서를 살펴보면 더 자세하게 이해 할 수 있다.