initial commit

1 files changed, 179 insertions, 0 deletions

diff --git a/files/zh-tw/web/api/document/createelement/index.html b/files/zh-tw/web/api/document/createelement/index.html
new file mode 100644
index 0000000000..2d847004cc
--- /dev/null
+++ b/files/zh-tw/web/api/document/createelement/index.html
@@ -0,0 +1,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>&lt;div&gt;</code> ，並將它插入到 ID <code>div1</code> 之前。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;||Working with elements||&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;div id="div1"&gt;The text above has been created dynamically.&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</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>