HTML 문서에서, Document.createElement() 메서드는 지정한 tagName의 HTML 요소를 만들어 반환합니다. tagName을 인식할 수 없으면 HTMLUnknownElement를 대신 반환합니다.

구문

let element = document.createElement(tagName[, options]);

매개변수

tagName
생성할 요소의 유형을 가리키는 문자열.
options Optional
is 속성 하나를 가진 ElementCreationOptions 객체. 속성의 값은 customElements.define()을 사용해 정의한 사용자 정의 요소입니다.

반환 값

새로운 Element.

예제

아래 예제는 새로운 <div> 엘리먼트를 생성한 후, ID가 "div1" 인 요소 이전에 추가합니다.

HTML

<!DOCTYPE html>
<html>
<head>
  <title>||Working with elements||</title>
</head>
<body>
  <div id="div1">위의 텍스트는 동적으로 추가했습니다.</div>
</body>
</html>

JavaScript

document.body.onload = addElement;

function addElement () { 
  // create a new div element 
  var newDiv = document.createElement("div"); 
  // and give it some content 
  var newContent = document.createTextNode("환영합니다!"); 
  // add the text node to the newly created div
  newDiv.appendChild(newContent);  

  // add the newly created element and its content into the DOM 
  var currentDiv = document.getElementById("div1"); 
  document.body.insertBefore(newDiv, currentDiv); 
}

명세

Specification Status Comment
DOM
The definition of 'Document.createElement' in that specification.
Living Standard  

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support YesEdge Full support YesFirefox Full support Yes
Notes
Full support Yes
Notes
Notes Doesn't conform to the DOM spec for XUL and XHTML documents: localName and namespaceURI are not set to null on the created element.
IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
options parameterChrome Full support Yes
Notes
Full support Yes
Notes
Notes For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Edge ? Firefox Full support 50
Notes
Full support 50
Notes
Notes Firefox accepts a string instead of an object here, but only from version 51 onwards. In version 50, options must be an object.
IE ? Opera Full support Yes
Notes
Full support Yes
Notes
Notes For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Safari ? WebView Android Full support Yes
Notes
Full support Yes
Notes
Notes For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Chrome Android No support No
Notes
No support No
Notes
Notes For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Edge Mobile ? Firefox Android Full support 50
Notes
Full support 50
Notes
Notes Firefox accepts a string instead of an object here, but only from version 51 onwards. In version 50, options must be an object.
Opera Android Full support Yes
Notes
Full support Yes
Notes
Notes For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: urty5656, fscholz, khalid32, Hyeongryeol
최종 변경자: urty5656,