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