textContent vs innerHTML in the JavaScript DOM

Although commonly used interchangeably, there is a major difference between the textContent and innerHTML properties when working with Elements in JavaScript, and it's important you know what that is.

The major difference is that when using the innerHTML property, the client browser will actually interpret the content as HTML markup, and apply that change to the DOM/Window. On the other hand, the textContent property will only change the the text, preserving any HTML markup.

In this video I take you through a basic example to demonstrate that difference.

Support me on Patreon:

For your reference, check this out:

Follow me on Twitter @dcode!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

[LofiWurld]

Cheers dom, you really understand DOM

[silentsage]

Simple example, yet effective explanation! So helpful, thanks for this!

[Craicman]

And now I can finish my assignment. Thank you

[creativeuk]

Great video. Did not know about the security aspect of innerHtml.

[tungvuongtri]

This video is really good. Thank you very much.

[rumanmushtaq]

thanx for simple and easiest way to get concept

[ManontheBroadcast]

The interesting part is the subtle difference between textContent and innerText.
Could you make a video on that ? ...

[winterxmood]

How were you able to stylize the bold text and your h1 without any inline css or external css file?

[Chukonu]

What keyboard/switches are you using? Sounds good.

[العرندس-عل]

what about inserting <script> with new function ? why new function not working if it linked to a TAG ??

[albertlewis]

Great explanation, keep the good work.
P.S: I subscribed and liked the video

[petermuller]

There are 2 ways to sdd text content into html. When should we use CSS i.e. content:before and when should we use javascript?

[adityakumar]

My code is not working how can I get a help from you. Please help me sir

[georgecolumbu]

thanks you've been so helpfull, you have no idea

[senju]

Can you send a value like this 18.4983552, -77.8715136 to an input tag?

[curtal]

I know it’s been a while but if you still use this account could u tell me the keyboard that you were using in this video? Or at least the switches. They sound really cool. They’re similar to box red pretty sure. Btw great and helpful video ;)

EDIT: You do often upload videos. Subbed :D. I hope I get an answear.

[michaelcervantes]

I literally did the exact same thing and got absolutely no output

[GOKU-fnhe]

Bruh stop lying It's not html property !! It's ur property!! you are that DOM!! btw thanks buddy :)