html - span - textcontent

¿Cuál es la diferencia entre innerText y outerText?

Question

Después de buscar en la web entendí la diferencia entre innerHTML y outerHTML.

Sin embargo, estoy teniendo dificultades para comprender la diferencia entre innerText y outerText. Ambos parecen casi iguales para mí.

¿Alguien puede ayudarme a entender esto con una buena ilustración?

Gracias !

Answer 1

Básicamente,
innerText : lo que hay entre las etiquetas del elemento.
outerText : contenido del elemento, incluidas las etiquetas.

Answer 2

innerText cambia solo el texto dentro de las etiquetas HTML, por ejemplo

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

p.innerText = "Changed!"

Se convierte

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

Mientras que outerText :

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

p.outerText = "Changed!"

Se convierte

<div>
   Changed!
</div>