자바스크립트 insertBefore() 함수 사용법 – 지정한 자식 요소 앞에 삽입

`Node.insertBefore()` 사용법

insertBefore() 함수는
특정 부모 노드 내에서 지정한 자식 노드 바로 앞에 새로운 노드를 삽입합니다.

노드
HTML DOM은 노드의 집합체입니다.
HTML에서 말하는 요소는 "요소 노드"를 의미하며,
텍스트는 "텍스트 노드",
주석은 "주석 노드"라고 말합니다.
요소는 오직 "요소 노드"만을 의미합니다.

이 함수를 사용하면 원하는 위치에 새로운 요소를 쉽게 삽입할 수 있습니다.

자바스크립트로 "새로 생성한 노드"가 아닌, 문서에 "이미 존재하는 노드"를 insertBefore() 함수로 삽입할 경우, 해당 노드는 기존 위치에서 삽입되는 위치로 이동합니다. 관련 예제를 참고하세요!

구문

parentNode는 새로운 노드를 삽입할 부모 노드입니다.
즉, parentNode 내에서 지정한 자식 노드인 referenceNode 바로 앞에 newNode를 삽입합니다.

매개변수

insertBefore() 함수의 매개변수
`newNode`	삽입할 노드입니다. 노드는 '요소 노드', '텍스트 노드' 등 어떤 형태일 수 있습니다.
`referenceNode`	`newNode`가 삽입될 기준 노드입니다.

insertBefore() 함수는 하나의 노드(node) 트리(tree)를 특정 부모 노드 내어서 지정한 자식 노드 바로 앞에 추가하는 역할을 합니다. 즉, 삽입하는 노드의 자손 노드가 있을 경우에는 영향을 받지 않지만, 여러 개의 노드 트리를 한 번에 삽입하는 것은 불가능합니다.

반환 값

추가된 노드를 반환합니다. 반환된 노드는 새롭게 추가된 부모 노드의 자식 노드가 됩니다.
newNode가 DocumentFragment 객체인 경우, 빈 DocumentFragment 객체가 반환됩니다.
만약 referenceNode가 null이면 newNode는 parentNode의 안쪽 끝 부분, 즉 마지막 자식으로 삽입됩니다. 관련 예제를 참고하세요!

예제

상황에 따라 insertBefore()를 사용하는 예제입니다.

자바스크립트로 생성한 요소를 삽입하기

다음은 버튼을 클릭하면, document.createElement()로 만든 요소 노드를 특정 부모 내에서 지정한 요소의 바로 앞에 삽입하는 예제입니다.

HTML

<div id="parent">
    <div id="first">First</div>
    <div id="second">Second</div>
    <div id="me" style="color: red;">me</div>
</div>
<hr>
<button type="button" id="insert-btn">div의 자식 요소 삽입하기</button>

JavaScript

const btn = document.getElementById("insert-btn");

btn.addEventListener("click", () => {
    // 부모 요소 노드
    const parent = document.getElementById("parent");

    if (parent) {
        // 자식으로 삽입할 요소
        const newElement = document.createElement("p");
        newElement.textContent = "새로운 텍스트";

        // 삽입할 요소의 기준 요소
        const referenceNode = document.getElementById("me");

        // 삽입할 요소의 기준 요소 바로 앞에 생성한 요소 삽입
        parent.insertBefore(newElement, referenceNode);
    }
});

코드 부연설명
getElementById() 함수는 주어진 문자열과 값이 일치하는 id 속성의 값을 가진 요소 객체를 반환합니다.

코드 부연설명
createElement() 함수는 새로운 HTML 요소를 생성해서 반환합니다.

기존 요소 이동하기

문서에 "이미 존재하는 노드"를 insertBefore() 함수로 삽입할 경우, 해당 노드는 기존 위치에서 삽입되는 위치로 이동합니다.

이는 문서상 DOM에서 하나의 노드는 한 위치에만 존재할 수 있기 때문입니다. 즉, 복사본이 생성되지 않고, 그 노드가 새로운 위치로 이동하는 것입니다.

HTML

<p id="reference-element">기존 요소의 텍스트</p>
<div id="parent">
    <div id="first">First</div>
    <div id="second">Second</div>
    <div id="me" style="color: red;">me</div>
</div>
<hr>
<button type="button" id="insert-btn">div의 자식 요소 삽입하기</button>

JavaScript

const btn = document.getElementById("insert-btn");

btn.addEventListener("click", () => {
    // 부모 요소 노드
    const parent = document.getElementById("parent");

    if (parent) {
        // 자식으로 삽입할 기존 요소
        const referenceElement = document.getElementById("reference-element");

        // 삽입할 요소의 기준 요소
        const referenceNode = document.getElementById("me");

        // 삽입할 요소의 기준 요소 바로 앞에 생성한 요소 삽입
        parent.insertBefore(referenceElement, referenceNode);
    }
});

이 예제에서 버튼을 클릭하면 해당 노드는 기존 위치에서 삽입되는 위치로 이동합니다.

그리고, 이 후에도 버튼을 클릭하면 더 이상 해당 노드는 삽입되지 않습니다.
이는 문서상 DOM에서 하나의 노드는 한 위치에만 존재할 수 있기 때문입니다. 즉, 복사본이 생성되지 않고, 그 노드가 새로운 위치로 이동하는 것입니다. 이러한 이유로 요소는 반복적으로 삽입되지 않습니다.

삽입될 기준 노드가 존재하지 않을 경우

삽입될 기준 노드가 존재하지 않으면(null 값인 경우) 특정 부모의 안쪽 끝 부분, 즉 마지막 자식으로 삽입됩니다.

HTML

<div id="parent">
    <div id="first">First</div>
    <div id="second">Second</div>
</div>
<hr>
<button type="button" id="insert-btn">div의 자식 요소 삽입하기</button>

JavaScript

const btn = document.getElementById("insert-btn");

btn.addEventListener("click", () => {
    // 부모 요소 노드
    const parent = document.getElementById("parent");

    if (parent) {
        // 자식으로 삽입할 요소
        const newElement = document.createElement("p");
        newElement.textContent = "새로운 텍스트";

        // 삽입할 요소의 기준 요소 => 존재하지 않음!!
        const referenceNode = parent.children[4]; // 다섯 번째 자식 요소는 존재하지 않음

        // 삽입할 요소의 기준 요소 바로 앞에 생성한 요소 삽입
        parent.insertBefore(newElement, referenceNode);

        // 삽입한 요소 객체 반환
        console.log(newElement); // <p>새로운 텍스트</p>
    }
});

코드 부연설명
createElement() 함수는 새로운 HTML 요소를 생성해서 반환합니다.

코드 부연설명
children 속성은 현재 요소의 모든 자식 요소를 HTMLCollection 객체로 반환합니다. 인덱싱으로 자식 요소 객체에 접근이 가능합니다.