메서드 insertAdjacentElement

insertAdjacentElement 메서드를 사용하면 페이지의 어느 곳에나 요소를 삽입할 수 있습니다. 주로 createElement로 요소를 생성한 후에 사용됩니다. 코드는 기준 요소를 기준으로 삽입됩니다. 기준 요소 앞(삽입 방식 beforeBegin), 뒤(삽입 방식 afterEnd), 그리고 기준 요소의 시작 부분(삽입 방식 afterBegin) 또는 끝 부분(삽입 방식 beforeEnd)에 삽입할 수 있습니다.

구문

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

예제 . 방식 beforeBegin

기준 요소가 #target 요소라고 가정해 봅시다. 그 앞에 새로운 문단을 삽입하겠습니다:

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

javascriptlet p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);

코드 실행 결과:

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

예제 . 방식 afterEnd

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

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

javascriptlet p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);

코드 실행 결과:

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

예제 . 방식 afterBegin

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

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

javascriptlet p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);

코드 실행 결과:

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

예제 . 방식 beforeEnd

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

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

javascriptlet p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);

코드 실행 결과:

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

같이 보기