HTML DOM의 createElement() 메서드는 자바스크립트(JavaScript)를 사용하여 HTML 요소를 동적으로 생성할 때 사용하는 핵심 메서드입니다. 이 메서드는 생성하려는 요소의 이름을 매개변수로 받아 해당 요소 노드를 만들어 반환합니다.
단, createElement()로 생성한 요소는 그 자체만으로는 화면에 나타나지 않습니다. 새로 만든 요소를 실제 DOM 트리에 추가하려면 반드시 appendChild() 메서드를 함께 사용해야 합니다.
문법(Syntax)
createElement() 메서드의 기본 문법은 다음과 같습니다.
document.createElement(nodename)
- nodename: 생성할 HTML 요소의 태그 이름을 문자열로 지정합니다. 예: "BUTTON", "DIV", "P" 등
예제(Example)
버튼을 클릭할 때마다 새로운 버튼을 화면에 추가하는 간단한 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>createElement() example</h1>
<p>Click the below button to create more buttons</p>
<button onclick="createButton()">CREATE</button>
<br><br>
<script>
var i=0;
function createButton() {
i++;
var btn = document.createElement("BUTTON");
btn.innerHTML="BUTTON"+i;
var br= document.createElement("BR");
document.body.appendChild(btn);
document.body.appendChild(br);
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.
CREATE 버튼을 세 번 클릭하면, 클릭한 횟수만큼 새로운 버튼이 순서대로 추가되는 것을 확인할 수 있습니다.
코드 상세 설명
위 예제의 동작 원리를 단계별로 살펴보겠습니다.
1. 클릭 이벤트 설정
먼저 사용자가 클릭하면 createButton() 함수가 실행되도록 버튼에 onclick 이벤트를 연결합니다.
<button onclick="createButton()">CREATE</button>
2. 요소 생성 및 DOM 추가
createButton() 함수 내부에서는 document 객체의 createElement() 메서드를 사용해 <button> 요소를 생성합니다. 이어서 innerHTML 속성으로 버튼 위에 표시될 텍스트를 설정하고, 줄바꿈을 위해 <br> 요소도 함께 생성합니다. 마지막으로 appendChild() 메서드를 통해 두 요소를 모두 문서 본문(body)에 추가합니다.
var i=0;
function createButton() {
i++;
var btn = document.createElement("BUTTON");
btn.innerHTML="BUTTON"+i;
var br= document.createElement("BR");
document.body.appendChild(btn);
document.body.appendChild(br);
}3. 카운터 변수의 역할
변수 i는 버튼이 몇 번 생성되었는지 세는 카운터 역할을 하며, 함수가 호출될 때마다 1씩 증가합니다. 이 값이 "BUTTON1", "BUTTON2", "BUTTON3"처럼 버튼 라벨에 붙어 각각의 버튼을 구분할 수 있게 해줍니다.
정리
createElement() 메서드는 다음과 같은 흐름으로 사용됩니다.
- 생성: document.createElement("태그이름")으로 요소 노드를 만든다.
- 설정: innerHTML, className 등으로 내용과 속성을 지정한다.
- 추가: appendChild() 또는 append()로 부모 노드에 삽입한다.
이 패턴은 동적 UI 구성, 목록 자동 생성, 사용자 입력 기반 콘텐츠 추가 등 실무 자바스크립트 개발에서 매우 빈번하게 활용되므로 확실히 익혀두는 것이 좋습니다.