"(408) *-**\nVerified"

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 !

First Google result described it pretty well: `outerText`: Enables you to change all the element’s text, *including* the start and end tags. — Marty, Aug 28 '13 at 07:10

score 81 · Accepted Answer · answered Aug 28 '13 at 07:10

81

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>

answered Aug 28 '13 at 07:10

CodingIntrigue

score 19 · Answer 2 · answered Aug 28 '13 at 07:10

19

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

answered Aug 28 '13 at 07:10

Sadiq

7

Just as a side note: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/outerText `This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.` – Erenor Paz Sep 26 '17 at 10:40

2 Answers2