[Javascript] insertAdjacentHTML

Element의 내용을 추가하여 입력할 때 항상 innerHTML을 이용했습니다.

document.getElementById('div1').innerHTML += '[HTML string]';​

하지만 innerHTML의 경우 가끔 자식 Elements의 Event handler에 영향을 끼친다고합니다.

저의 경우에는 입력했던 HTML string 안에 element의 clientHeight, clientWidth이 0이 되는 문제가 발생했습니다.

 

insertAdjacentHTML를 사용한다면, 다른 Element에 영향을 끼치는 것을 방지할 수 있습니다.

document.getElementById('div1').insertAdjacentHTML('beforeend', '[HTML string]');

beforebegin, afterbegin, beforeend, afterend  등 첫번째 Parameter에 string을 insert할 위치를 지정할 수 있습니다.

다른 Elements에 독립적으로 insert하기 때문에 속도 또한 향상시킬 수 있습니다.

각각 Parameter에 따라 insert 되는 위치는 아래와 같습니다.

<!-- beforebegin -->
<div id='div1'>
  <!-- afterbegin -->
  <table>...</table>
  <!-- beforeend -->
</div>
<!-- afterend -->