MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Element.insertAdjacentText()

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

構文

element.insertAdjacentText(position, element);

パラメーター

position
element に対する相対的な位置を DOMString 表現で指定します。次の文字列のうち1つを取ります。
  • 'beforebegin': element 本体の前。
  • 'afterbegin': element のすぐ内側の、最初の子要素の前。
  • 'beforeend': element のすぐ内側の、最後の子要素の後。
  • 'afterend':element 本体の後。
element
DOM ツリーに挿入するテキストの DOMString 表現。

返り値

Void。

例外

例外 説明
SyntaxError position として指定した文字列が認識できない値だった。

ポジション名の視覚的な表現

<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->
注記: beforebegin および afterend の positions が使えるのは、対象ノードがツリーの中にあって、親要素を持つ時に限られます。
beforeBtn.addEventListener('click', function() {
  para.insertAdjacentText('afterbegin',textInput.value);
});

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

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

仕様

仕様 ステータス コメント
DOM
insertAdjacentText() の定義
現行の標準  

ブラウザー間の互換性

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート (有) 48.0 (48.0) ? (有) (有)
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? 48.0 (48.0) ? ? ?

関連項目

ドキュメントのタグと貢献者

 このページの貢献者: shuuji3
 最終更新者: shuuji3,