What is the difference between innerText and outerText?

Question

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 1

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> 

Answer 2

Basically,
innerText: what's between the tags of the element.
outerText: content of the element, including the tags.