files/zh-tw/web/api/element/insertadjacenthtml/index.html


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

---
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>