files/ja/web/api/element/insertadjacenttext/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
136
137
138
139
140
141
142
143
144
145
146
147

---
title: Element.insertAdjacentText()
slug: Web/API/Element/insertAdjacentText
translation_of: Web/API/Element/insertAdjacentText
---
<p>{{APIRef("DOM")}}</p>

<p><code>insertAdjacentText()</code> メソッドは、与えられたテキストノードを、メソッドを実行した要素に対する相対的な位置に挿入します。</p>

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

<pre><em>element</em>.insertAdjacentText(<em>position</em>, <em>element</em>);</pre>

<h3 id="パラメーター">パラメーター</h3>

<dl>
 <dt>position</dt>
 <dd><code>element</code> に対する相対的な位置を {{domxref("DOMString")}} 表現で指定します。次の文字列のうち1つを取ります。
 <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>element</dt>
 <dd>DOM ツリーに挿入するテキストの {{domxref("DOMString")}} 表現。</dd>
</dl>

<h3 id="返り値">返り値</h3>

<p>Void。</p>

<h3 id="例外">例外</h3>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">例外</th>
   <th scope="col">説明</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>SyntaxError</code></td>
   <td><code>position</code> として指定した文字列が認識できない値だった。</td>
  </tr>
 </tbody>
</table>

<h3 id="ポジション名の視覚的な表現">ポジション名の視覚的な表現</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> の positions が使えるのは、対象ノードがツリーの中にあって、親要素を持つ時に限られます。</div>

<pre class="brush: js">beforeBtn.addEventListener('click', function() {
  para.insertAdjacentText('afterbegin',textInput.value);
});

afterBtn.addEventListener('click', function() {
  para.insertAdjacentText('beforeend',textInput.value);
});</pre>

<p>私たちが GitHub に用意した <a href="https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentText.html">insertAdjacentText.html</a> デモを見てください。(同時に <a href="https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentText.html">source code</a> も読んでください。) ここにはシンプルなパラグラフが1つあります。フォーム要素に好きなテキストを入力してから、<em>Insert before</em> または <em>Insert after</em> ボタンを押すと、<code>insertAdjacentText()</code> が、入力したテキストをパラグラフのテキストの前または後に挿入します。すでにあるテキストノードにテキストが追加されるのではなく、新しい追加テキストが含まれる別のテキストノードが生成されて、それが追加されることに注意してください。</p>

<p><strong style="color: #4d4e53; font-size: 2.14286rem; font-weight: 700; letter-spacing: -1px;">仕様</strong></p>

<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 WHATWG', '#dom-element-insertadjacenttext', 'insertAdjacentText()')}}</td>
   <td>{{ Spec2('DOM WHATWG') }}</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>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatGeckoDesktop("48.0") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</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("48.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.insertAdjacentHTML()")}}</li>
</ul>