initial commit

1 files changed, 135 insertions, 0 deletions

diff --git a/files/zh-tw/web/api/element/insertadjacenthtml/index.html b/files/zh-tw/web/api/element/insertadjacenthtml/index.html
new file mode 100644
index 0000000000..6b9da0f403
--- /dev/null
+++ b/files/zh-tw/web/api/element/insertadjacenthtml/index.html
@@ -0,0 +1,135 @@
+---
+title: Element.insertAdjacentHTML()
+slug: Web/API/Element/insertAdjacentHTML
+translation_of: Web/API/Element/insertAdjacentHTML
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code>insertAdjacentHTML()</code> 把傳入的字串解析成 HTML 或 XML，並把該節點插入到 DOM 樹指定的位置。它不會重新解析被使用的元素，因此他不會破壞該元素裡面原有的元素。這避免了序列化的複雜步驟，使得它比直接操作  <code>innerHTML</code> 快上許多。</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre><em>element</em>.insertAdjacentHTML(<em>position</em>, <em>text</em>);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt>position</dt>
+ <dd>A {{domxref("DOMString")}} representing the position relative to the <code>element</code>; must be one of the following strings:
+ <ul>
+  <li><code style="color: red;">'beforebegin'</code>: 在 <code>element</code> 之前。</li>
+  <li><code style="color: green;">'afterbegin'</code>: 在 <code>element</code> 裡面，第一個子元素之前。</li>
+  <li><code style="color: blue;">'beforeend'</code>: 在 <code>element</code> 裡面，最後一個子元素之後。</li>
+  <li><code style="color: magenta;">'afterend'</code>: 在 <code>element</code> 之後。</li>
+ </ul>
+ </dd>
+ <dt>text</dt>
+ <dd><code>text</code> 是即將被解析並插入到 DOM 樹裡的字串。</dd>
+</dl>
+
+<h3 id="Visualization_of_position_names">Visualization of position names</h3>
+
+<pre>&lt;!-- beforebegin --&gt;
+&lt;p&gt;
+  &lt;!-- afterbegin --&gt;
+  foo
+  &lt;!-- beforeend --&gt;
+&lt;/p&gt;
+&lt;!-- afterend --&gt;</pre>
+
+<div class="note"><strong>Note: </strong> <code>beforebegin</code> 和 <code>afterend</code> 只在該節點位於 DOM 樹內、並且有母元素時有效。</div>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush: js">// &lt;div id="one"&gt;one&lt;/div&gt;
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '&lt;div id="two"&gt;two&lt;/div&gt;');
+
+// At this point, the new structure is:
+// &lt;div id="one"&gt;one&lt;/div&gt;&lt;div id="two"&gt;two&lt;/div&gt;</pre>
+
+<h2 id="Specification" name="Specification">Notes</h2>
+
+<h3 id="Security_Considerations">Security Considerations</h3>
+
+<p>When inserting HTML into a page by using <code>insertAdjacentHTML</code> be careful not to use user input that hasn't been escaped.</p>
+
+<p>It is not recommended you use <code>insertAdjacentHTML</code> when inserting plain text; instead, use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent" title="The Node.textContent property represents the text content of a node and its descendants."><code>Node.textContent</code></a> property or <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText" title="The insertAdjacentText() method inserts a given text node at a given position relative to the element it is invoked upon."><code>Element.insertAdjacentText()</code></a> method. This doesn't interpret the passed content as HTML, but instead inserts it as raw text.</p>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}</td>
+   <td>{{ Spec2('DOM Parsing') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("8.0") }}</td>
+   <td>4.0</td>
+   <td>7.0</td>
+   <td>4.0 (527)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("8.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Element.insertAdjacentElement()")}}</li>
+ <li>{{domxref("Element.insertAdjacentText()")}}</li>
+ <li>{{domxref("XMLSerializer")}}: Construct a DOM representation of XML text</li>
+ <li><a class="external" href="https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post</a><span class="external"> by Henri Sivonen including benchmark showing that insertAdjacentHTML can be way faster in some cases.</span></li>
+</ul>