1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
|
---
title: Document.createElement()
slug: Web/API/Document/createElement
translation_of: Web/API/Document/createElement
---
<div>{{APIRef("DOM")}}</div>
<p>於 <a href="/en-US/docs/Web/HTML">HTML</a> 文件中，<strong><code>Document.createElement()</code></strong> 方法可以依指定的標籤名稱（<code>tagName</code>）建立 HTML 元素，或是在未定義標籤名稱下建立一個 {{domxref("HTMLUnknownElement")}}。在 <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a> 文件中，<code>Document.createElement()</code> 將會建立指定的 XUL 元素。而在其它文件，則會建立一個 namespace URI 為 <code>null</code> 的元素。</p>
<p>若要明確指定元素的 namespace URI，請使用 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS" title="Creates an element with the specified namespace URI and qualified name."><code>document.createElementNS()</code></a>。</p>
<h2 id="語法">語法</h2>
<pre class="brush: js"><var>var <em>element</em></var> = <var>document</var>.createElement(<em><var>tagName[, options]</var></em>);
</pre>
<h3 id="參數">參數</h3>
<dl>
<dt><code>tagName</code></dt>
<dd>一個指定類型給所創建的元素的字串。{{domxref("Node.nodeName", "nodeName")}} 創建的元素由 <code>tagName</code> 的值初始，不要使用吻合名稱（例如 "html:a"）。當該方法在 HTML 文件中被調用時，<code>createElement()</code> 會先將 <code>tagName</code> 轉化為小寫後再創建元素。在 Firefox、Opera 和 Chrome，<code>createElement(null)</code> 與 <code>createElement("null")</code> 作用相同。</dd>
<dt><code>options</code>{{optional_inline}}</dt>
<dd>選擇性 <code>ElementCreationOptions</code> 物件包含一個屬性 <code>is</code>，它的值是先前使用<code>customElements.define()</code> 所定義的自定義元素的標籤名稱。為了與以前的 <a href="https://www.w3.org/TR/custom-elements/">自定義元素規範</a> 相容，一些瀏覽器將允許你在此傳遞一個字串而非物件，其字串的值就是自定義元件的標籤名稱。了解更多訊息以及如何使用此參數，可以參閱 <a href="https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml">擴展原生 HTML 元素</a> 。</dd>
<dd>新元素將被賦予一個 <code>is</code> 屬性，其值就是自定義元素的標籤名稱。自定義元素算是實驗中的功能，因此目前只作用於部分瀏覽器中。</dd>
</dl>
<h3 id="回傳值">回傳值</h3>
<p>一個新的 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element" title="The Element interface represents an object of a Document. This interface describes methods and properties common to all kinds of elements. Specific behaviors are described in interfaces which inherit from Element but add additional functionality."><code>Element</code></a>.</p>
<h2 id="範例">範例</h2>
<p>這邊創建一個新的 <code><div></code> ，並將它插入到 ID <code>div1</code> 之前。</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: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>
</pre>
<h3 id="JavaScript"><span style="line-height: normal;">JavaScript</span></h3>
<pre class="brush:js">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);
}</pre>
<p>{{EmbedLiveSample("Example", 500, 50)}}</p>
<h2 id="規範">規範</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}<sup>[1][2]</sup></td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td><code>options</code> argument</td>
<td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoDesktop(50)}}<sup>[4][5]</sup></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Android Webview</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td><code>options</code> argument</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
</tr>
</tbody>
</table>
</div>
<p>[1] Starting with Gecko 22.0 {{geckoRelease("22.0")}} <code>createElement()</code> no longer uses the {{domxref("HTMLSpanElement")}} interface when the argument is "bgsounds", "multicol", or "image". Instead, <code>HTMLUnknownElement</code> is used for "bgsound" and "multicol" and {{domxref("HTMLElement")}} <code>HTMLElement</code> is used for "image".</p>
<p>[2] The Gecko implementation of <code>createElement</code> doesn't conform to the DOM spec for XUL and XHTML documents: <code>localName</code> and <code>namespaceURI</code> are not set to <code>null</code> on the created element. See {{ Bug(280692) }} for details.</p>
<p>[3] In previous versions of the specification, this argument was just a string whose value was the custom element's tag name. For example: <code>document.createElement("button", "custom-button")</code> rather than <code>document.createElement("button", {id: "custom-button"})</code>. For the sake of backwards compatibility, Chrome accepts both forms.</p>
<p>[4] See [3] above: like Chrome, Firefox accepts a string instead of an object here, but only from version 51 onwards. In version 50, <code>options</code> must be an object.</p>
<p>[5] To experiment with custom elements in Firefox, you must set the <code>dom.webcomponents.enabled</code> and <code>dom.webcomponents.customelements.enabled</code> preferences to <code>true</code>.</p>
<h2 id="See_also" name="See_also">參見</h2>
<ul>
<li>{{domxref("Node.removeChild()")}}</li>
<li>{{domxref("Node.replaceChild()")}}</li>
<li>{{domxref("Node.appendChild()")}}</li>
<li>{{domxref("Node.insertBefore()")}}</li>
<li>{{domxref("Node.hasChildNodes()")}}</li>
</ul>
|
