자바스크립트 appendChild() 함수 – 자식 요소 추가

`Node.appendChild()` 사용법

appendChild() 함수는
하나의 노드를 특정 부모 노드 안쪽 끝 부분, 즉 마지막 자식으로 추가합니다.

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

appendChild() 함수는 특정 요소의 자식 요소를 추가하는데 많이 활용됩니다.

부모 노드 안쪽 끝 부분, 즉 마지막 자식을 시각화하면 다음과 같습니다.

JavaScript

// 특정 부모 요소 노드
const ele = document.getElementById("my-div");

// 자식으로 추가할 요소 노드
const newElement = document.createElement("p");
newElement.textContent = "새로운 텍스트";

// 특정 부모 노드 요소 안쪽 끝 부분, 즉 마지막 자식으로 추가
ele.appendChild(newElement);

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

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

코드 부연설명
textContent 속성은 HTML 요소의 텍스트 콘텐츠를 가져오거나 설정합니다.

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

구문

parentNode는 새로운 노드를 추가할 부모 노드입니다.

매개변수

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

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

반환 값

추가된 노드를 반환합니다. 반환된 노드는 새롭게 추가된 부모 노드의 자식 노드가 됩니다.

예제

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

자바스크립트로 생성한 요소를 특정 요소의 자식으로 추가하기

다음은 document.createElement()로 만든 요소 노드를 지정한 요소의 자식 요소로 추가하는 예제입니다.

HTML

<div id="my-div" style="border: 1px solid red; margin-bottom: 1em;">
    Content
</div>

<button type="button" id="insert-btn">div의 자식 요소 추가하기</button>

JavaScript

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

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

    if (myDiv) {
        // 자식으로 추가할 요소 노드
        const newElement = document.createElement("p");
        newElement.textContent = "새로운 텍스트";

        // div 안쪽 끝 부분, 즉 마지막 자식으로 추가
        myDiv.appendChild(newElement);
    }
});

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

자바스크립트로 생성한 텍스트를 특정 요소의 자식으로 추가하기

appendChild() 함수는 노드를 특정 노드의 자식으로 추가하는 함수입니다. 노드가 '요소' 노드이든 '텍스트' 노드이든 상관없이 사용할 수 있습니다.

다음은 document.createTextNode()로 만든 '텍스트' 노드를 지정한 '요소' 노드의 자식으로 추가하는 예제입니다.

HTML

<div id="my-div" style="border: 1px solid red; margin-bottom: 1em;">
    Content
</div>

<button type="button" id="insert-btn">div에 텍스트 노드 추가하기</button>

JavaScript

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

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

    if (myDiv) {
        // 자식으로 추가할 텍스트 노드
        const newText = document.createTextNode("😃 텍스트 노드");

        // div 안쪽 끝 부분, 즉 마지막 자식으로 추가
        myDiv.appendChild(newText);
    }
});

코드 부연설명
createTextNode() 함수는 지정한 문자열로 텍스트 노드 객체를 생성해서 반환합니다.

이모지(😊)에 관해서는 웹 페이지에서 이모지(이모티콘) 사용하기를 참고하세요.

기존 요소 이동하기

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

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

만약 기존에 있는 DOM 요소를 다른 위치로 옮긴다면 아래와 같은 방식으로 할 수 있습니다.

HTML

<div id="first" style="background-color: gold;">첫 번째 요소</div>
<div id="second">두 번째 요소</div>

<div id="my-div" style="border: 1px solid red; margin-bottom: 1em;">
    Content
</div>

<button type="button" id="insert-btn">div의 자식으로 추가하기</button>

JavaScript

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

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

    if (myDiv) {
        // 기존 DOM 요소 노드 가져오기
        const firstElement = document.getElementById("first");

        // div 안쪽 끝 부분, 즉 마지막 자식으로 추가
        myDiv.appendChild(firstElement);
    }
});

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

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