Document.createElement() 사용법

createElement() 함수는
지정한 HTML 태그 이름의 HTML 요소 객체를 생성해서 반환합니다.

JavaScript 
const element = document.createElement("div");

// 생성된 HTML 요소 객체를 반환
console.log(element); // <div></div>

createElement() 함수로 생성된 요소 객체는 아직 DOM에 추가되지 않은 상태이며, 원하는 위치에 직접 추가(혹은 삽입)해야 웹 페이지에서 표시됩니다.

구문

JavaScript 
document.createElement(tagName)

매개변수

createElement() 함수의 매개변수
tagName 생성할 요소의 HTML 태그 이름을 문자열로 지정합니다.
예를 들어, "div", "span", "p" 등.

반환 값

생성된 HTML 요소 노드 객체입니다.
이 객체는 해당 태그 이름을 가진 새로운 DOM 요소를 나타내며, 이후에 이 요소에 다양한 속성과 내용을 설정할 수 있습니다.

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

예제

아래는 createElement() 함수를 사용하여 새로운 요소를 생성하고, 그 요소에 콘텐츠나 속성을 추가한 후, 원하는 위치에 삽입하는 예제들입니다. 다양한 상황을 다룬 예제를 포함하여 설명하겠습니다.

단순 텍스트 추가

<div> 요소를 생성하고 텍스트 콘텐츠를 설정한 후, <body> 끝에 추가하는 예제입니다.

JavaScript 
// div 요소 생성
const newDiv = document.createElement("div");

// 텍스트 콘텐츠 추가
newDiv.textContent = "안녕하세요! 이 문장은 새로운 div에 추가된 텍스트입니다.";

// 생성된 요소를 body 끝에 추가
document.body.appendChild(newDiv);
부연설명
  • textContent 속성은 HTML 요소의 텍스트 콘텐츠를 가져오거나 설정합니다.
  • appendChild() 함수는 노드를 특정 노드의 마지막 자식으로 추가합니다.

속성 추가

<img> 요소를 생성하고 src, alt 등의 속성을 추가하여 이미지가 표시되도록 설정한 후, <body> 끝에 추가하는 예제입니다.

JavaScript 
// img 요소 생성
const newImg = document.createElement("img");

// 속성 추가
newImg.src = "https://example.com/sample.jpg"; // 이미지 경로
newImg.alt = "샘플 이미지"; // 대체 텍스트
newImg.width = 300; // 이미지 너비 설정

// 생성된 요소를 body 끝에 추가
document.body.appendChild(newImg);
부연설명
  • src 속성은 HTML 미디어 요소의 HTML src 속성의 값을 설정하거나 가져오는 속성입니다.
  • alt 속성은 HTML 미디어 요소의 HTML alt 속성의 값을 설정하거나 가져오는 속성입니다.
  • width 속성은 HTML 미디어 요소의 HTML width 속성의 값을 설정하거나 가져오는 속성입니다.
  • appendChild() 함수는 노드를 특정 노드의 마지막 자식으로 추가합니다.

클래스 및 인라인 스타일 추가

<p> 요소를 생성한 후 클래스와 인라인 스타일을 추가하여 문단의 스타일을 설정한 후, 특정 위치에 추가하는 예제입니다.

JavaScript 
// p 요소 생성
const newParagraph = document.createElement("p");

// 텍스트 콘텐츠 추가
newParagraph.textContent = "이 문단은 스타일이 적용된 문단입니다.";

// 클래스 추가
newParagraph.className = "styled-paragraph";

// 인라인 스타일 추가
newParagraph.style.color = "red";
newParagraph.style.fontSize = "18px";

// 생성된 요소를 특정 위치에 추가 (여기서는 body 끝에 추가)
document.body.appendChild(newParagraph);
부연설명
  • textContent 속성은 HTML 요소의 텍스트 콘텐츠를 가져오거나 설정합니다.
  • className 속성은 HTML 요소의 HTML class 속성의 값을 설정하거나 가져오는 속성입니다.
  • style 속성은 HTML 요소의 인라인 스타일을 설정할 수 있는 속성입니다.
  • appendChild() 함수는 노드를 특정 노드의 마지막 자식으로 추가합니다.

특정 위치에 요소 삽입

createElement() 함수로 생성한 요소를 insertAdjacentElement() 함수를 사용하여 특정 위치에 삽입하는 예제입니다.

JavaScript 
// p 요소 생성
const newParagraph = document.createElement("p");

// 텍스트 콘텐츠 추가
newParagraph.textContent = "이 문장은 특정 위치에 삽입됩니다.";

// 기존 요소 선택
const referenceElement = document.querySelector("#reference");

// 생성된 요소를 기존 요소 바로 뒤에 삽입
referenceElement.insertAdjacentElement("afterend", newParagraph);
부연설명
  • textContent 속성은 HTML 요소의 텍스트 콘텐츠를 가져오거나 설정합니다.
  • querySelector() 함수는 CSS 선택자와 일치하는 첫 번째 요소 객체를 반환합니다.

브라우저 호환성

createElement() 함수의 브라우저 호환성
메서드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
createElement() 1 12 1 1

명세서

createElement() 함수의 명세서 사양
명세서 사양
createElement() DOM Standard
#ref-for-dom-document-createelement①

참고문헌

같이 보기