메서드 insertAdjacentHTML

메서드 insertAdjacentHTML는 HTML 코드 문자열을 페이지의 어느 곳에나 삽입할 수 있게 해줍니다. 코드는 기준 요소를 기준으로 삽입됩니다. 기준 요소 앞에 삽입(삽입 방식 'beforeBegin'), 뒤에 삽입(삽입 방식 'afterEnd'), 그리고 기준 요소의 시작 부분(삽입 방식 'afterBegin') 또는 끝 부분(삽입 방식 'beforeEnd')에 삽입할 수 있습니다.

문법

javascript기준 요소.insertAdjacentHTML(삽입 방식, 삽입할 코드);

예제 . 방식 beforeBegin

기준 요소를 #target 요소라고 가정합니다. 그 요소 앞에 새 단락을 삽입해 보겠습니다:

html<div id="target">
  <p>elem</p>
</div>

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('beforeBegin', '<p>!</p>');

코드 실행 결과:

html<p>!</p>
<div id="target">
  <p>elem</p>
</div>

예제 . 방식 afterEnd

이번에는 기준 요소 뒤에 새 단락을 삽입하겠습니다:

html<div id="target">
  <p>elem</p>
</div>

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('afterEnd', '<p>!</p>');

코드 실행 결과:

html<div id="target">
  <p>elem</p>
</div>
<p>!</p>

예제 . 방식 afterBegin

기준 요소의 시작 부분에 새 단락을 삽입하겠습니다:

html<div id="target">
  <p>elem</p>
</div>

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('afterBegin', '<p>!</p>');

코드 실행 결과:

html<div id="target">
  <p>!</p>
  <p>elem</p>
</div>

예제 . 방식 beforeEnd

기준 요소의 끝 부분에 새 단락을 삽입하겠습니다:

html<div id="target">
  <p>elem</p>
</div>

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('beforeEnd', '<p>!</p>');

코드 실행 결과:

html<div id="target">
  <p>elem</p>
  <p>!</p>
</div>

함께 보기