What is the difference between innerText and outerText?

html dom innertext

Abhishek Singh · Aug 28, 2013 · Viewed 26.6k times · Source

After searching through web i understood the difference between innerHTML and outerHTML.

However i am having hard time understanding the difference between innerText and outerText. Both appear almost same to me.

Can anyone help me understand this with a nice illustration ?

Thank You !

Answer

innerText changes only text within HTML tags, e.g.

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

p.innerText = "Changed!"

Becomes

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

Whereas outerText:

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

p.outerText = "Changed!"

Becomes

<div>
   Changed!
</div>