Why do innerHTML and textContent give different results?

Question

I know that these 2 properties work differently. According to the spec, innerHTML works with html-tags, while textContent works with text. But I don't get why they work like that here.

//textContent
function func1() {
    let a3 = [[1, 2, 3], [3, 4, 5], [6, [7, 'my']]];
    document.querySelector('.out-1').textContent = a3[2][0][1];
}
document.querySelector('.b-1').onclick = func1;

//innerHTML
function func2() {
    let a3 = [[1, 2, 3], [3, 4, 5], [6, [7, 'my']]];
    document.querySelector('.out-2').innerHTML = a3[2][0][1];
    return a3[2][1][1];
}
document.querySelector('.b-2').onclick = func2;

.wrapper {
  margin-bottom: 50px;
}

 <!-- textContent -->
 <div class='wrapper'>
   <div>textContent</div>
   <button class="b-1">PUSH</button>
   <div class="out-1"></div>
 </div>
 
 <!-- innerHTML -->
<div class='wrapper'>
   <div>innerHTML</div>
   <button class="b-2">PUSH</button>
   <div class="out-2"></div>
</div>

I'll try to pull up non-existent element. textContent pulls up nothing, while innerHTML pulls up undefined. Why is that so?

Does this answer your question? https://stackoverflow.com/questions/35213147/difference-between-textcontent-vs-innertext — isherwood, Oct 20 '21 at 16:19
_"The [`textContent`](https://dom.spec.whatwg.org/#dom-node-textcontent) setter steps are to, if the given value is null, act **as if it was the empty string** instead..."_ — Andreas, Oct 20 '21 at 16:22
@Ivan There is no such thing as `undefined` in the DOM. I'm quite confident that `undefined` is therefor treated as "null" when it reaches the DOM. — Andreas, Oct 20 '21 at 18:26

AnanthDev · Accepted Answer · 2021-10-20T16:52:00.233

1

Problem -

a3[2][0][1]; returns undefined, because there's no such element. innerHTML shows undefined but textContent treats undefined as an empty string

const o = document.getElementById('1');
const s = document.getElementById('2');

o.textContent = undefined;
s.innerHTML = undefined;

console.log(typeof o.textContent);
// this means undefined is treated as an empty string

<div id="1"></div>
<div id="2"></div>

Note:

From what i tested, innerHTML accepts anything from Objects, arrays, strings, numbers, booleans, undefined so on and it'll display [object Object], [Array] etc. except for null in that case innerHTML will resolve it to an empty content and will display nothing

edited Oct 20 '21 at 16:52

answered Oct 20 '21 at 16:25

AnanthDev

1,605
1
4
14

`textContent` works only with strings. That's understandable. But why does `innerHTML` work with JS data types? I mean, it's supposed to work with html-tags – Ivan Oct 20 '21 at 16:44
Or it seems to me like `textContent` can insert just a text between 2 html-tags. While `innerHTML` is able to insert anything (other html-tags, JS data types, strings...) between 2 html-tags. Am I correct? – Ivan Oct 20 '21 at 16:49
yup @Ivan except for null tho, if you pass in null, it'll resolve to an empty content – AnanthDev Oct 20 '21 at 16:49
I was trying to run your code in Chrome's console, but I can't. It just throws an exeption **Uncaught TypeError: Cannot set properties of null (setting 'textContent')** Why does it throw this exeption? – Ivan Oct 20 '21 at 17:29
1

because in this case, i created my own html content and appropriate javascript for the snippet, make sure u used the same html tags / ids – AnanthDev Oct 20 '21 at 17:31
`innerHTML` can transform any type of JS data to string as well. So, it looks like everything(except for null) that goes there except for tags will be transform into a string. – Ivan Oct 20 '21 at 17:44
null will be a string too, but it'll be an empty string `s.innerHTML = null; console.log(typeof s.innerHTML); //string` – Ivan Oct 20 '21 at 17:47
yea i added that onto my answer – AnanthDev Oct 20 '21 at 17:47

Why do innerHTML and textContent give different results?

1 Answers1