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?
Problem -
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