insertAdjacentTextメソッド
メソッド insertAdjacentText は、
ページの任意の場所に文字列を挿入することを可能にします。文字列は
基準要素に対して挿入されます。
基準要素の前に挿入すること（挿入方法 'beforeBegin'）、
その後ろに挿入すること（挿入方法 'afterEnd'）、
また、基準要素の先頭に（挿入方法 'afterBegin'）
または末尾に（挿入方法 'beforeEnd'）
挿入することができます。
構文
基準要素.insertAdjacentText(挿入方法, 挿入するテキスト);
例 . 方法 beforeBegin
基準要素を #target 要素とします。
その前に何らかのテキストを挿入してみましょう：
<div id="target">
<p>elem</p>
</div>
let target = document.querySelector('#target');
target.insertAdjacentText('beforeBegin', 'text');
コード実行の結果：
text
<div id="target">
<p>elem</p>
</div>
例 . 方法 afterEnd
次に、基準要素の後に新しいテキストを挿入してみましょう：
<div id="target">
<p>elem</p>
</div>
let target = document.querySelector('#target');
target.insertAdjacentText('afterEnd', 'text');
コード実行の結果：
<div id="target">
<p>elem</p>
</div>
text
例 . afterBegin
基準要素の先頭に新しいテキストを挿入してみましょう：
<div id="target">
<p>elem</p>
</div>
let target = document.querySelector('#target');
target.insertAdjacentText('afterBegin', 'text');
コード実行の結果：
<div id="target">
text
<p>elem</p>
</div>
例 . 方法 beforeEnd
基準要素の末尾に新しいテキストを挿入してみましょう：
<div id="target">
<p>elem</p>
</div>
let target = document.querySelector('#target');
target.insertAdjacentText('beforeEnd', 'text');
コード実行の結果：
<div id="target">
<p>elem</p>
text
</div>
関連項目
-
メソッド
insertAdjacentElement、
指定された場所に要素を挿入します -
メソッド
insertAdjacentHTML、
指定された場所にHTMLコードを挿入します -
メソッド
prepend、
要素を先頭に挿入します -
メソッド
append、
要素を末尾に挿入します -
メソッド
appendChild、
要素を親要素の末尾に挿入します -
メソッド
insertBefore、
要素の前に要素を挿入します
