--- title: Document.createElement() slug: Web/API/Document/createElement translation_of: Web/API/Document/createElement ---
{{APIRef("DOM")}}

於 HTML 文件中，Document.createElement() 方法可以依指定的標籤名稱（tagName）建立 HTML 元素，或是在未定義標籤名稱下建立一個 {{domxref("HTMLUnknownElement")}}。在 XUL 文件中，Document.createElement() 將會建立指定的 XUL 元素。而在其它文件，則會建立一個 namespace URI 為 null 的元素。

若要明確指定元素的 namespace URI，請使用 document.createElementNS()。

語法

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

參數

tagName
一個指定類型給所創建的元素的字串。{{domxref("Node.nodeName", "nodeName")}} 創建的元素由 tagName 的值初始，不要使用吻合名稱（例如 "html:a"）。當該方法在 HTML 文件中被調用時，createElement() 會先將 tagName 轉化為小寫後再創建元素。在 Firefox、Opera 和 Chrome，createElement(null) 與 createElement("null") 作用相同。
options{{optional_inline}}
選擇性 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);
}

{{EmbedLiveSample("Example", 500, 50)}}

規範

Specification Status Comment
{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}} {{Spec2('DOM WHATWG')}}

瀏覽器相容性

{{CompatibilityTable}}

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}[1][2] {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
options argument {{CompatVersionUnknown}}[3] {{CompatUnknown}} {{CompatGeckoDesktop(50)}}[4][5] {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
Feature Android Android Webview Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
options argument {{CompatVersionUnknown}} {{CompatVersionUnknown}}[3] {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatVersionUnknown}}[3]

[1] Starting with Gecko 22.0 {{geckoRelease("22.0")}} createElement() no longer uses the {{domxref("HTMLSpanElement")}} interface when the argument is "bgsounds", "multicol", or "image".  Instead, HTMLUnknownElement is used for "bgsound" and "multicol" and {{domxref("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.

參見