Accessing inner content of an HTML element using JavaScript DOM.

Question

I was going through some of the ways to access the inner content of an HTML element but there seems to be quite a few ways. So I have understood the difference between "innerHTML" and "innerText" but there is also something called "textContent", how is it different from "innerText" and also when compared to the above mentioned how does createTextNode() work and how should one access it's value further in the program.

Answer 1

This is textContent, it copies content of script tag as well.

https://code.sololearn.com/W3DknRGKKfJw/?ref=app

If you edit the script and change textContent to innerText, you'll see that the content of script tag is not copied for innerText.

Answer 2

Avinesh Maybe mdn can help?

https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

Answer 3

Avinesh Actually I learned something while looking up too.

I know we should avoid using innerHTML to prevent XSS attack.

But I didn't know that we should use textContent instead of innerText, because innerText can be heavy.

Thanks for your question.

Answer 4

"textContent" is used for checking the content of the text...and also, u can do challanges with this. The "createTextNode()" is used for creating text with JS. But u need two variables: one to be the parent and one to be the child(for example: <div> parent, and <p> child.

Answer 5

Gordon this is 1 case but could you please generalize this a little more. A little more explanation might help. Also is there a use case or it could be avoided?

Answer 6

Gordon thanks, it has started making some sense now. My bad, I should have looked that up myself.

Answer 7

Gordon nice to know it helped you learn something new.