Document.createElement()
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.
* Some parts of this feature may have varying levels of support.
HTML 문서에서, Document.createElement() 메서드는 지정한 tagName의 HTML 요소를 만들어 반환합니다. tagName을 인식할 수 없으면 HTMLUnknownElement를 대신 반환합니다.
구문
js
let element = document.createElement(tagName[, options]);
매개변수
tagName-
생성할 요소의 유형을 가리키는 문자열.
optionsOptional-
is속성 하나를 가진ElementCreationOptions객체. 속성의 값은customElements.define()을 사용해 정의한 사용자 정의 요소입니다.
반환 값
새로운 Element.
예제
아래 예제는 새로운 <div> 엘리먼트를 생성한 후, ID가 "div1" 인 요소 이전에 추가합니다.
HTML
html
<!doctype html>
<html>
<head>
<title>||Working with elements||</title>
</head>
<body>
<div id="div1">위의 텍스트는 동적으로 추가했습니다.</div>
</body>
</html>
JavaScript
js
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 |
|---|
| DOM # ref-for-dom-document-createelement① |
브라우저 호환성
Loading…
같이 보기
Node.removeChild()Node.replaceChild()Node.appendChild()Node.insertBefore()Node.hasChildNodes()document.createElementNS()— to explicitly specify the namespace URI for the element.