insertAdjacentTextメソッド

メソッド insertAdjacentText は、 ページの任意の場所に文字列を挿入することを可能にします。文字列は 基準要素に対して挿入されます。 基準要素の前に挿入すること（挿入方法 'beforeBegin'）、 その後ろに挿入すること（挿入方法 'afterEnd'）、 また、基準要素の先頭に（挿入方法 'afterBegin'） または末尾に（挿入方法 'beforeEnd'） 挿入することができます。

構文

javascript基準要素.insertAdjacentText(挿入方法, 挿入するテキスト);

例 . 方法 beforeBegin

基準要素を #target 要素とします。 その前に何らかのテキストを挿入してみましょう：

html<div id="target">
  <p>elem</p>
</div>

javascriptlet target = document.querySelector('#target');
target.insertAdjacentText('beforeBegin', 'text');

コード実行の結果：

htmltext
<div id="target">
  <p>elem</p>
</div>

例 . 方法 afterEnd

次に、基準要素の後に新しいテキストを挿入してみましょう：

html<div id="target">
  <p>elem</p>
</div>

javascriptlet target = document.querySelector('#target');
target.insertAdjacentText('afterEnd', 'text');

コード実行の結果：

html<div id="target">
  <p>elem</p>
</div>
text

例 . afterBegin

基準要素の先頭に新しいテキストを挿入してみましょう：

html<div id="target">
  <p>elem</p>
</div>

javascriptlet target = document.querySelector('#target');
target.insertAdjacentText('afterBegin', 'text');

コード実行の結果：

html<div id="target">
  text
  <p>elem</p>
</div>

例 . 方法 beforeEnd

基準要素の末尾に新しいテキストを挿入してみましょう：

html<div id="target">
  <p>elem</p>
</div>

javascriptlet target = document.querySelector('#target');
target.insertAdjacentText('beforeEnd', 'text');

コード実行の結果：

html<div id="target">
  <p>elem</p>
  text
</div>

関連項目