Sé que estas 2 propiedades funcionan de manera diferente. Según la especificación, innerHTML funciona con etiquetas html, mientras que textContent funciona con texto. Pero no entiendo por qué funcionan así aquí.
//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> Intentaré sacar un elemento inexistente. textContent no muestra nada, mientras que innerHTML muestra undefined . ¿Por qué es así?
Problema -
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>Nota:
Por lo que probé, innerHTML acepta cualquier cosa, desde objetos, matrices, cadenas, números, valores booleanos, indefinidos, etc., y mostrará [object Object], [Array], etc. excepto nulo, en ese caso innerHTML lo resolverá en un vacío contenido y no mostrará nada