[JavaScript] insertAdjacentHTML

element.insertAdjacentHTML(position, text);

position

• position은 beforebegin, afterbegin, beforeend, afterend만 사용할 수 있다.

<!--* beforebegin *-->
<div class="container">
  <!--* afterbegin *-->
  <div class="box">box</div>
  <div class="box">box</div>
  <div class="box">box</div>
  <!--* beforeend *-->
</div>
<!--* afterend *-->

text

• 해당 위치에 삽입될 HTML요소

insertAdjacentHTML은 특정 위치에 DOM tree 안에 원하는 node들을 추가한다.
즉, 기존에 존재하던 값은 건드리지 않고 내가 추가하고 싶은 값을 원하는 위치에 놓을지 설정할 수 있다

Element.insertAdjacentHTML()