index.md

title	short-title	slug	l10n
Element: insertAdjacentText() メソッド	insertAdjacentText()	Web/API/Element/insertAdjacentText	sourceCommit bbf7f25f9cf95fb154e2740a9fdc9c02818981bf

{{APIRef("DOM")}}

insertAdjacentText() は {{domxref("Element")}} インターフェイスのメソッドで、与えられたテキストノードを、メソッドを実行した要素に対する相対的な位置に挿入します。

構文

insertAdjacentText(where, data)

引数

• where

  • : 文字列で、メソッドを呼び出した要素から見た相対的な位置を表します。以下のいずれかでなければなりません。

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

• data

  • : メソッドが呼び出された要素から相対的に指定された位置 where に挿入する新しいテキストノードを作成する文字列です。

返値

なし ({{jsxref("undefined")}})。

例外

• SyntaxError {{domxref("DOMException")}}
  • : where が理解できない値である場合に発生します。

位置名の図解

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

メモ: beforebegin および afterend の位置が使えるのは、対象ノードがツリーの中にあって、親要素を持つ時に限られます。

例

beforeBtn.addEventListener("click", () => {
  para.insertAdjacentText("afterbegin", textInput.value);
});

afterBtn.addEventListener("click", () => {
  para.insertAdjacentText("beforeend", textInput.value);
});

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

仕様書

{{Specifications}}

ブラウザーの互換性

{{Compat}}

関連情報

• {{domxref("Element.insertAdjacentElement()")}}
• {{domxref("Element.insertAdjacentHTML()")}}