innerTextとouterTextの違いは何ですか？

Question

Webを検索した後、innerHTMLとouterHTMLの違いを理解しました。

しかし、innerTextとouterTextの違いを理解するのに苦労しています。どちらもほとんど同じように見えます。

素敵なイラストで誰かがこれを理解するのを手伝ってくれる？

ありがとうございました ！

Answer 1

innerTextは、HTMLタグ内のテキストのみを変更します。

<div>
  <p>Change Me</p>
</div>

p.innerText = "Changed!"

なる

<div>
  <p>Changed!</p>
</div>

一方、outerText：

<div>
  <p>Change Me</p>
</div>

p.outerText = "Changed!"

なる

<div>
   Changed!
</div>

Answer 2

基本的に、
innerText：要素のタグの間にあるもの。
outerText：要素のコンテンツ、タグを含む。