메서드 insertAdjacentElement
insertAdjacentElement 메서드를 사용하면
페이지의 어느 곳에나 요소를 삽입할 수 있습니다.
주로 createElement로
요소를 생성한 후에 사용됩니다.
코드는 기준 요소를 기준으로 삽입됩니다.
기준 요소 앞(삽입 방식 beforeBegin),
뒤(삽입 방식 afterEnd),
그리고 기준 요소의 시작 부분(삽입 방식 afterBegin)
또는 끝 부분(삽입 방식 beforeEnd)에
삽입할 수 있습니다.
구문
기준 요소.insertAdjacentElement(삽입 방식, 삽입할 코드);
예제 . 방식 beforeBegin
기준 요소가 #target 요소라고 가정해 봅시다.
그 앞에 새로운 문단을 삽입하겠습니다:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);
코드 실행 결과:
<p>!</p>
<div id="target">
<p>elem</p>
</div>
예제 . 방식 afterEnd
이번에는 기준 요소 뒤에 새로운 문단을 삽입하겠습니다:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);
코드 실행 결과:
<div id="target">
<p>elem</p>
</div>
<p>!</p>
예제 . 방식 afterBegin
기준 요소의 시작 부분에 새로운 문단을 삽입하겠습니다:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);
코드 실행 결과:
<div id="target">
<p>!</p>
<p>elem</p>
</div>
예제 . 방식 beforeEnd
기준 요소의 끝 부분에 새로운 문단을 삽입하겠습니다:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
코드 실행 결과:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
같이 보기
-
insertAdjacentHTML메서드,
지정된 위치에 태그를 삽입합니다 -
insertAdjacentText메서드,
지정된 위치에 텍스트를 삽입합니다 -
prepend메서드,
요소를 시작 부분에 삽입합니다 -
append메서드,
요소를 끝 부분에 삽입합니다 -
appendChild메서드,
요소를 부모 요소의 끝 부분에 삽입합니다 -
insertBefore메서드,
요소를 다른 요소 앞에 삽입합니다
