HTMLElement: outerText プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

outerText は HTMLElement インターフェイスのプロパティで、 HTMLElement.innerText と同じ値を返します。 セッターとして使用するときは、現在のノード全体を指定されたテキストに置き換えます（これは現在のノードの内部のコンテンツを置き換える innerText と異なります）。

詳しい情報や、両プロパティをゲッターとして使用する方法を示した例は HTMLElement.innerText を参照してください。

値

文字列で、この要素とその配下で表示されるテキストコンテンツを表します。

要素自身が表示されていない場合（例えば、文書から切り離されていた場合や表示から隠されていた場合）、返値は Node.textContent プロパティのものと同じになります。

セッターとして使用された場合、この要素の子要素を指定された値で置き換え、すべての改行を <br> 要素に変換します。

例

この例では、 outerText と innerText をセッターとして使用した場合の根本的な違いを強調しています（ゲッターで使用した場合は同じです）。

メモ: この例は What is the difference between innerText and outerText? (Stack overflow) の記事で codingintrigue が作成し、 CC BY-SA 3.0 のライセンスで配布されているものを変更したものです。

以下のような HTML が入っているページがあるとします。

html
<div>
  <p>元の内容</p>
</div>

outerText は選択された要素全体を置き換えますので、 JavaScript で p.outerText = "要素全体を置換" を実行すると、選択された p 要素全体を置き換えます。

html
<div>要素全体を置換</div>

一方 p.innerText = "要素内のコンテンツを置換" を実行すると、選択された p 要素の内部のコンテンツを置き換えます。

html
<div>
  <p>要素内のコンテンツを置換</p>
</div>

仕様書

Specification
HTML Standard
# dom-outertext

ブラウザーの互換性

BCD tables only load in the browser

関連情報