메서드 insertAdjacentHTML

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

문법

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

예제 . 방식 beforeBegin

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

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

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

코드 실행 결과:

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

예제 . 방식 afterEnd

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

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

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

코드 실행 결과:

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

예제 . 방식 afterBegin

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

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

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

코드 실행 결과:

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

예제 . 방식 beforeEnd

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

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

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

코드 실행 결과:

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

함께 보기

메서드 insertAdjacentText,
지정된 위치에 텍스트를 삽입합니다.
메서드 insertAdjacentElement,
지정된 위치에 요소를 삽입합니다.
메서드 prepend,
요소들을 시작 부분에 삽입합니다.
메서드 append,
요소들을 끝 부분에 삽입합니다.
메서드 appendChild,
요소들을 부모의 끝 부분에 삽입합니다.
메서드 insertBefore,
요소를 특정 요소 앞에 삽입합니다.