appendChild() 메서드란?
HTML DOM의 appendChild() 메서드는 지정한 부모 노드의 자식 노드 목록 맨 끝에 새로운 노드를 추가하는 데 사용됩니다. 텍스트 노드나 요소 노드를 동적으로 생성해 삽입할 수 있으며, 이미 존재하는 요소를 현재 위치에서 다른 위치로 이동시키는 용도로도 활용할 수 있습니다.
예를 들어 리스트에 새 항목을 추가하거나, 특정 단락 아래에 새로운 단락을 삽입하는 등 다양한 상황에서 유용하게 사용할 수 있습니다.
기본 문법
appendChild() 메서드의 기본 문법은 다음과 같습니다.
node.appendChild( node )
매개변수 node에는 부모 노드에 추가하고자 하는 객체를 전달합니다. 이 매개변수는 필수 값이므로 반드시 지정해야 합니다.
실전 예제
버튼을 클릭하면 새로운 단락(p) 요소를 생성하여 div 요소에 추가하는 간단한 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to create a paragraph and append it to the div</p>
<div id="SampleDIV">
A DIV element
</div>
<button onclick="AppendP()">Append</button>
<script>
var x=1;
function AppendP() {
var paragraph = document.createElement("P");
paragraph.innerHTML = "This is paragraph "+x;
document.getElementById("SampleDIV").appendChild(paragraph);
x++;
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
[Append] 버튼을 3번 클릭한 후의 결과:
코드 상세 분석
위 예제의 동작 원리를 단계별로 살펴보겠습니다.
1. div 요소 준비
먼저 id가 "SampleDIV"인 div 요소를 만들었습니다. 이후 추가되는 노드는 모두 이 div의 자식 노드로 들어갑니다.
<div id="SampleDIV"> A DIV element </div>
2. 버튼과 이벤트 연결
다음으로 "Append"라는 이름의 버튼을 배치하고, 클릭 시 AppendP() 함수가 실행되도록 onclick 속성으로 연결했습니다.
<button onclick="AppendP()">Append</button>
3. AppendP() 함수의 동작
AppendP() 함수는 먼저 document.createElement("P")를 통해 새로운 단락(p) 요소를 생성하고 변수 paragraph에 할당합니다. 그런 다음 innerHTML을 사용해 단락에 텍스트를 넣는데, 이때 변수 x의 값을 함께 붙여 넣습니다. 변수 x는 [Append] 버튼을 클릭할 때마다 1씩 증가하므로, 클릭 횟수만큼 번호가 매겨진 단락이 계속 추가됩니다. 마지막으로 새로 생성된 단락을 div 요소의 자식 노드로 추가합니다.
var x=1;
function AppendP() {
var paragraph = document.createElement("P");
paragraph.innerHTML = "This is paragraph "+x;
document.getElementById("SampleDIV").appendChild(paragraph);
x++;
}정리
appendChild() 메서드는 웹 페이지에서 DOM 구조를 동적으로 조작할 때 가장 기본적이면서도 널리 쓰이는 메서드입니다. 새 요소를 추가하는 것뿐 아니라 기존 요소를 이동시키는 기능도 제공하므로, 동적인 UI를 구현할 때 반드시 알아두어야 할 핵심 API라고 할 수 있습니다.