원본: https://www.golinuxcloud.com/insertbefore-javascript/
DOM 메소드 중에는 insertBefore라는 메소드가 있습니다. 이는 기존 노드 앞에 새로운 노드를 삽입하는 기능을 하며 올바르게 사용하려면 다음 세 가지를 지정해야 합니다:
- 삽입 하고자 하는 새로운 노드
- 삽입할 위치를 지정해줄 기존 노드
- 두 노드의 부모 노드
Table of Contents
자바스크립트 insertBefore 문법
다음은 insertBefore() 메소드의 문법 구문입니다:
node.insertBefore(newnode, existingnode);이 메소드는 newnode, existingnode 두 개의 매개변수를 받습니다:
- newnode: 새로 삽입할 노드
- existingnode: newnode를 앞에 배치할 기준 노드
새로운 노드를 삽입 시 삽입할 부모 노드가 뭔지 모를 경우도 있습니다만 몰라도 상관없습니다.
왜냐하면 모든 노드의 부모는 반드시 다른 노드여야 하고 (attribute 노드와 text 노드는 element 노드를 자식으로 가질 수 없음) 이는 위의 구문에서 보이는 existingnode의 parentNode 속성을 사용하면 되기 때문입니다.
예를 들어, id가 “imagegallery”인 이미지 갤러리 목록의 앞에 placeholder 요소를 삽입하는 방법은 다음과 같습니다:
const gallery = document.getElementById("imagegallery");
gallery.parentNode.insertBefore(placeholder, gallery);위의 예제에서 현재 gallery 요소의 parentNode는 body 입니다. insertBefore() 메소드에 의해 placeholder 요소는 body 요소의 자식으로 삽입되며 gallery 요소의 앞에 삽입됩니다.
위 예제와 비슷하게 description 요소를 형제 요소인 gallery 요소 앞에 삽입할 수 있습니다:
gallery.parentNode.insertBefore(description, gallery);위 스크립트의 실행 결과로 placeholder 요소와 description 요소는 gallery 요소 앞에 삽입되게 됩니다.
예제 1: insertBefore로 새 노드 삽입
만약 특정 노드를 이미 가지고 있고 거기에 새로운 노드를 추가해야하는 상황이라면 insertBefore() 메소드가 제격입니다.
이 메소드를 사용하면 지정된 노드 앞에 새로운 노드를 배치하게 되지만 삽입할 노드가 DOM에 이미 존재하는 경우 단순히 위치를 이동시켜줍니다.
다음의 예제는 <div> 요소의 첫 번째 자식으로 <p> 요소를 삽입하는 코드입니다:
<!DOCTYPE html>
<html lang="en">
<body>
<div id="myDiv">기존 콘텐츠의 위치</div>
</body>
<script>
const newnode = document.createElement("p");
newnode.innerHTML = "p는 기존 콘텐츠 앞에 위치 함";
const existingnode = document.getElementById("myDiv").firstChild;
document.getElementById("myDiv").insertBefore(newnode, existingnode);
</script>
</html>위의 코드를 실행하면 다음과 같은 결과를 볼 수 있습니다.
기존 요소를 getElementById() 메소드를 통해 가져온 다음 insertBefore() 메소드로 새 요소를 기존 요소 앞에 삽입했습니다.
예제 2: insertBefore 새 노드를 특정 위치에 삽입
이번 예제에서는 <div> 요소 내의 세 번째 단락(<p>) 바로 앞에 새로운 단락을 삽입해 보겠습니다.
<div> 요소의 모든 단락을 가져오기 위해 getElementsByTagName() 메소드를 사용했습니다. 그 다음 createElement() 메소드와 insertBefore() 메소드를 사용하여 세 번째 단락 앞에 새로운 단락을 삽입합니다.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="target">
<p>기존 단락 1</p>
<p>기존 단락 2</p>
<p>기존 단락 3</p>
<p>기존 단락 4</p>
</div>
</body>
<script>
// id가 target인 div 얻기
const div = document.getElementById('target');
// div 내의 p 요소들 가져오기
const paras = div.getElementsByTagName('p');
// 새로 삽입할 단락 생성
const newPara = document.createElement('p');
const text = document.createTextNode('새로운 단락');
newPara.appendChild(text);
// 세 번째 단락이 존재 하면 그 앞에 삽입하고
// 없다면 div의 마지막에 새 단락 추가
if (paras[2]) {
div.insertBefore(newPara, paras[2]);
} else {
div.appendChild(newPara);
}
</script>
</html>위의 예제를 실행하면 다음과 같은 화면을 볼 수 있습니다.
예제에서는 먼저 createElement() 메소드로 페이지에 삽입할 HTML 요소를 생성합니다. 우리는 기존 세 번째 단락 앞에 새로운 단락을 삽입할 것이므로 <div> 요소의 <p> 목록을 가져온 후 단락이 세 개 이상 있는지 확인하고 insertBefore() 메소드를 사용하여 새로운 단락을 세 번째 단락 앞에 삽입했습니다.
만일 단락이 세 개가 안된다면 appendChild() 메소드를 사용하여 <div> 요소의 끝에 새로운 단락을 추가하게 됩니다.
정리
다른 노드 앞에 새로운 노드를 삽입하려면 자바스크립트의 insertBefore() 메소드를 사용할 수 있습니다. 이 메소드는 새로 삽입할 노드와 기준 노드 두 개의 매개변수를 받습니다. 여기서 두 번째 매개변수를 생략하면 이 메소드는 appendChild() 메소드 처럼 동작합니다.