자바스크립트 replaceChild() 함수 – 자식 요소 교체

`Node.replaceChild()` 사용법

replaceChild() 함수는
특정 부모 노드 내에서 지정한 자식 노드를 새로운 자식 노드로 교체합니다.

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

removeChild() 함수를 사용하면 원하는 자식 요소를 손쉽게 교체할 수 있습니다.

구문

parentNode는 자식 노드를 교체할 부모 노드입니다.

매개변수

replaceChild() 함수의 매개변수
`newChild`	교체할 새로운 노드입니다. 노드는 '요소 노드', '텍스트 노드' 등 어떤 형태일 수 있습니다.
`oldChild`	이미 존재하는, 교체될 노드입니다. 노드는 '요소 노드', '텍스트 노드' 등 어떤 형태일 수 있습니다.

새 노드(newChild)가 DOM의 다른 위치에 이미 존재하는 경우 즉, 자바스크립트로 "새로 생성한 노드"가 아닌, 문서에 "이미 존재하는 노드"일 경우 replaceChild() 함수를 호출하면 먼저 해당 노드가 현재 위치에서 제거된 후, 지정된 부모 노드의 자식으로 교체됩니다. 관련 예제를 참고하세요!

반환 값

교체된 기존 자식 노드(oldChild)를 반환합니다.
교체된 노드(oldChild)에 대한 정보를 확인하거나 추가 작업을 수행하는 데 사용될 수 있습니다.

예제

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

자바스크립트로 생성한 요소로 교체하기

다음은 버튼을 클릭하면, 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="replace-btn">'me' 요소 교체하기</button>

JavaScript

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

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

    if (parent) {
        // 자식으로 교체할 새로운 요소 노드할 요소
        const newChild = document.createElement("p");
        newChild.textContent = "새로운 텍스트";

        // 이미 존재하는, 교체될 요소 노드
        const oldChild = document.getElementById("me");

        // 지정한 자식 요소 노드를 새로운 자식 요소 노드로 교체
        parent.replaceChild(newChild, oldChild);
    }
});

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

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

교체할 새로운 노드가 이미 존재하는 경우

문서에 "이미 존재하는 노드"일 경우 replaceChild() 함수를 호출하면 먼저 해당 노드가 현재 위치에서 제거된 후, 지정된 부모 노드의 자식으로 교체됩니다.

이는 문서상 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="replace-btn">'me' 요소 교체하기</button>

JavaScript

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

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

    if (parent) {
        // 교체할 새로운 노드가 이미 존재하는 경우
        const referenceElement = document.getElementById("reference-element");

        // 이미 존재하는, 교체될 요소 노드
        const oldChild = document.getElementById("me");

        // 지정한 자식 요소 노드를 새로운 자식 요소 노드로 교체
        parent.replaceChild(referenceElement, oldChild);
    }
});