於 HTML 文件中，Document.createElement() 方法可以依指定的標籤名稱（tagName）建立 HTML 元素，或是在未定義標籤名稱下建立一個 HTMLUnknownElement。在 XUL 文件中，Document.createElement() 將會建立指定的 XUL 元素。而在其它文件，則會建立一個 namespace URI 為 null 的元素。
若要明確指定元素的 namespace URI，請使用 document.createElementNS()。
語法
var element = document.createElement(tagName[, options]);
參數
tagName- 一個指定類型給所創建的元素的字串。
nodeName創建的元素由tagName的值初始，不要使用吻合名稱（例如 "html:a"）。當該方法在 HTML 文件中被調用時，createElement()會先將tagName轉化為小寫後再創建元素。在 Firefox、Opera 和 Chrome，createElement(null)與createElement("null")作用相同。 options選擇性- 選擇性
ElementCreationOptions物件包含一個屬性is，它的值是先前使用customElements.define()所定義的自定義元素的標籤名稱。為了與以前的 自定義元素規範 相容，一些瀏覽器將允許你在此傳遞一個字串而非物件，其字串的值就是自定義元件的標籤名稱。了解更多訊息以及如何使用此參數，可以參閱 擴展原生 HTML 元素 。 - 新元素將被賦予一個
is屬性，其值就是自定義元素的標籤名稱。自定義元素算是實驗中的功能，因此目前只作用於部分瀏覽器中。
回傳值
一個新的 Element.
範例
這邊創建一個新的 <div> ，並將它插入到 ID div1 之前。
HTML
<!DOCTYPE html> <html> <head> <title>||Working with elements||</title> </head> <body> <div id="div1">The text above has been created dynamically.</div> </body> </html>
JavaScript
document.body.onload = addElement;
function addElement () {
// create a new div element
// and give it some content
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hi there and greetings!");
newDiv.appendChild(newContent); //add the text node to the newly created div.
// 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 |
瀏覽器相容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | (Yes)[1][2] | (Yes) | (Yes) | (Yes) |
options argument |
(Yes)[3] | ? | 50 (50)[4][5] | ? | ? | ? |
| Feature | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
options argument |
(Yes) | (Yes)[3] | ? | ? | ? | ? | ? | (Yes)[3] |
[1] Starting with Gecko 22.0 (Firefox 22.0 / Thunderbird 22.0 / SeaMonkey 2.19) createElement() no longer uses the HTMLSpanElement interface when the argument is "bgsounds", "multicol", or "image". Instead, HTMLUnknownElement is used for "bgsound" and "multicol" and HTMLElement HTMLElement is used for "image".
[2] The Gecko implementation of createElement doesn't conform to the DOM spec for XUL and XHTML documents: localName and namespaceURI are not set to null on the created element. See bug 280692 for details.
[3] In previous versions of the specification, this argument was just a string whose value was the custom element's tag name. For example: document.createElement("button", "custom-button") rather than document.createElement("button", {id: "custom-button"}). For the sake of backwards compatibility, Chrome accepts both forms.
[4] See [3] above: like Chrome, Firefox accepts a string instead of an object here, but only from version 51 onwards. In version 50, options must be an object.
[5] To experiment with custom elements in Firefox, you must set the dom.webcomponents.enabled and dom.webcomponents.customelements.enabled preferences to true.