Element.insertAdjacentText()

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

element.insertAdjacentText(position, element);

position

element に対する相対的な位置を DOMString 表現で指定します。次の文字列のうち1つを取ります。

• 'beforebegin': element 本体の前。
• 'afterbegin': element のすぐ内側の、最初の子要素の前。
• 'beforeend': element のすぐ内側の、最後の子要素の後。
• 'afterend':element 本体の後。

element

DOM ツリーに挿入するテキストの DOMString 表現。

Void。

<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->

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() が、入力したテキストをパラグラフのテキストの前または後に挿入します。すでにあるテキストノードにテキストが追加されるのではなく、新しい追加テキストが含まれる別のテキストノードが生成されて、それが追加されることに注意してください。

仕様

• Element.insertAdjacentElement()
• Element.insertAdjacentHTML()