insertBefore 메서드

insertBefore 메서드는 다른 요소 앞에 요소를 삽입할 수 있게 합니다. 주로 createElement를 사용하여 요소를 생성한 후에 사용됩니다. 이 메서드는 삽입이 이루어질 요소 앞의 부모 요소에 적용됩니다.

구문

부모.insertBefore(요소, 삽입할 위치 앞의 요소);

예제

단락을 생성하고 두 번째 단락 앞에 배치해 보겠습니다:

<div id="parent">
	<p>요소 1</p>
	<p id="before">요소 2</p>
	<p>요소 3</p>
</div>

let parent = document.querySelector('#parent');
let before = document.querySelector('#before');

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

parent.insertBefore(p, before);

코드 실행 결과:

<div id="parent">
	<p>요소 1</p>
	<p>!</p>
	<p>요소 2</p>
	<p>요소 3</p>
</div>

예제

#parent 요소의 시작 부분에 단락을 추가해 보겠습니다. #parent의 첫 번째 자식 요소 앞에 단락을 삽입하면 됩니다. 이 자식 요소는 firstElementChild를 사용하여 찾을 수 있습니다:

<div id="parent">
	<p>요소 1</p>
	<p>요소 2</p>
</div>

let parent = document.querySelector('#parent');

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

parent.insertBefore(p, parent.firstElementChild);

코드 실행 결과:

<div id="parent">
	<p>!</p>
	<p>요소 1</p>
	<p>요소 2</p>
</div>

예제

두 번째 매개변수로 null을 전달하면 insertBefore 메서드는 appendChild처럼 동작합니다. 동시에, 요소에 자식 요소가 없으면 firstElementChild는 null을 반환합니다. 따라서 요소의 시작 부분에 추가는 자식 요소가 없는 경우에도 가능합니다:

<div id="parent"></div>

let parent = document.querySelector('#parent');

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

parent.insertBefore(p, parent.firstChild);

코드 실행 결과:

<div id="parent">
	<p>!</p>
</div>

참고 항목

prepend 메서드,
요소의 시작 부분에 요소를 삽입합니다.
appendChild 메서드,
부모 요소의 끝에 요소를 삽입합니다.
insertAdjacentElement 메서드,
지정된 위치에 요소를 삽입합니다.
insertAdjacentHTML 메서드,
지정된 위치에 태그를 삽입합니다.