files/ja/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

---
title: element.insertAdjacentHTML
slug: Web/API/Element/insertAdjacentHTML
tags:
  - API
  - DOM
  - DOM Element Methods
  - Gecko
  - Method
  - Reference
translation_of: Web/API/Element/insertAdjacentHTML
---
<div>{{ApiRef("DOM")}}</div>

<h2 id="Summary" name="Summary">概要</h2>

<p><code>insertAdjacentHTML()</code> は、第二引数で指定するテキストを HTML または XML としてパースし、その結果であるノードを DOM ツリー内の指定された位置（第一引数で指定）に挿入します。これは挿入先の要素を再度パースするものではないため、既存の要素や要素内部の破壊を伴いません。余分なシリアル化のステップを回避できる分、 <code>innerHTML</code> への代入による直接的な操作よりもはるかに高速な動作となります。</p>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="syntaxbox"><em>element</em>.insertAdjacentHTML(<em>position</em>, <em>text</em>);</pre>

<p><code>position</code> には <code>element</code> に対する相対位置を、以下に示す文字列の1つで指定します。</p>

<dl>
 <dt><code style="color: red;">'beforebegin'</code></dt>
 <dd>element の直前に挿入</dd>
 <dt><code style="color: green;">'afterbegin'</code></dt>
 <dd><code>element</code> 内部の、最初の子要素の前に挿入</dd>
 <dt><code>'beforeend'</code></dt>
 <dd><code style="color: blue;">element</code> 内部の、最後の子要素の後に挿入</dd>
 <dt><code style="color: magenta;">'afterend'</code></dt>
 <dd><code>element</code> の直後に挿入</dd>
</dl>

<p><code>text</code><em> </em>には HTML または XML としてパースし DOM ツリーに挿入することが可能な文字列を指定します。</p>

<h3 id="Visualization_of_position_names" name="Visualization_of_position_names">ポジション名の可視化</h3>

<pre>&lt;!-- <strong><code style="color: red;">beforebegin</code></strong> --&gt;
<code style="font-weight: bold;">&lt;p&gt;</code>
&lt;!-- <strong><code style="color: green;">afterbegin</code></strong> --&gt;
foo
&lt;!-- <strong><code style="color: blue;">beforeend</code></strong> --&gt;
<code style="font-weight: bold;">&lt;/p&gt;</code>
&lt;!-- <strong><code style="color: magenta;">afterend</code></strong> --&gt;</pre>

<div class="note"><strong>注記:</strong> <code>beforebegin</code> および <code>afterend</code> の位置指定で動作するのは、ノードがツリー内にあり、かつ親要素が存在する場合のみとなります。</div>

<h2 id="Example" name="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;');

// 挿入位置および挿入後の構造は、以下のようになります。
// &lt;div id="one"&gt;one&lt;/div&gt;&lt;div id="two"&gt;two&lt;/div&gt;</pre>

<h2 id="Specification" name="Specification">仕様</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様</th>
   <th scope="col">ステータス</th>
   <th scope="col">コメント</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">ブラウザ実装状況</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>機能</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>基本サポート</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>機能</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>基本サポート</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoMobile("8.0") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="関連情報">関連情報</h2>

<ul>
 <li>{{domxref("Element.insertAdjacentElement()")}}</li>
 <li>{{domxref("Element.insertAdjacentText()")}}</li>
 <li>Henri Sivonen 氏による <a class="external" href="http://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org へのゲストポスト</a><span class="external"> には、幾つかのケースでは insertAdjacentHTML  がより速い方法であることを示すベンチマークが含まれています。</span></li>
</ul>