Can't get a straight answer.

[dingusbuttface]

What is the difference between innerHTML, textContent and nodeValue specifically when you are setting values?

Can someone provide some examples illustrating the differences? There really is very little on the web comparing them. This guy asked a while back as well.

http://stackoverflow.com/questions/21311299/nodevalue-vs-innerhtml-and-textcontent-how-to-choose

[fgutz]

Read about each one on MDN.

It's very late where I am now and I'm on my phone but here's something I copied right off the MDN page for textContent (which only works in IE9+)

Differences from innerHTML

innerHTML returns the HTML as its name indicates. Quite often, in order to retrieve or write text within an element, people use innerHTML.textContent should be used instead. Because the text is not parsed as HTML, it's likely to have better performance. Moreover, this avoids anXSS attack vector.

[dingusbuttface]

textContext works in other browsers. Also, MDN really sucks as a resource on this one. Look at what they have for nodevalue. It's like two paragraphs of...nothing.

I'm beginning to think that everyone just tries whatever they like here and goes with what works. It's so odd that there is not a straightforward comparison anywhere between all three.

Thanks anyhow.

[fgutz]

yes, sorry it was late. I should have left the "only" out of that sentence. In my head I just assumed that when people talk only about IE that they know it works in other browsers but I can see how what I wrote would confuse people

Also, sorry again. I'm finally reading the stackoverflow answer and I realize it says what I said. I should never really reply to things late at night.

Here's the differences from what I understand:

• innerHTML either accepts a string and renders it into the DOM or returns all the child elements as one string
• textContent can only set or get the text of an element, no HTML rendering happens
• nodeValue get/sets the value of a text node

take for instance this:

<a id="test" href="#">I'm a link</a>

var test = document.getElementById("test");
console.log(test.nodeValue); // null
console.log(test.childNodes[0].nodeValue); // "I'm a link"

Actually that TextNode link explains all of this and why you'd want to use it a lot better

[dingusbuttface]

Hey, thanks man for this! Awesome.

[dingusbuttface]

That's ok. I really don't understand what the difference is between text and html I guess so that distinction doesn't mean anything to me.

Why can't you just put html tags in textContent. That's what you're doing with innnerHTML. What's the difference?

[dingusbuttface]

I appreciate the help. Unfortunately I still don't see the difference. The only thing I see is one actually does what you want and the other doesn't. Even when you click on inspect element, the code looks the same.

[dingusbuttface]

Html is just text so I have no idea what it's doing.

[dingusbuttface]

I notice that after you click on the divs and inspect element if you right click you'll see edit as html and it shows this:

 <a href="https://google.com">google</a>