En JavaScript, estas dos propiedades establecen o devuelven el contenido de un elemento HTML en el DOM. Aparentemente hacen lo mismo, pero vamos a ver que hay diferencias sensibles entre ellas.
Tabla de contenidos
textContent
Vamos a ver como aplicarlo:
const elemSalida = document.getElementById('salida')
elemSalida.textContent = "Vamos a darle a Javascript"
Resultado
<p id="salida">Vamos a darle a Javascript</p>
innerHTML
Vamos a ver como aplicarlo:
const elemSalida = document.getElementById('salida')
elemSalida.innerHTML = "<strong>Vamos a darle a Javascript</strong>"Resultado
<p id="salida"><strong>Vamos a darle a Javascript</strong></p>
Las diferencias
La propiedad innerHTML establece y devuelve el contenido con HTML, textContent establece y devuelve el contenido excluyendo las etiquetas HTML
La propiedad innerHTML es vulnerable a ciberataques. HTML5 no permite que se ejecuten etiquetas <script> insertadas con innerHTML, pero aún es posible incrustar código JavaScript sin usar la etiqueta <script> . Estos ataques son denominados Cross-Site Scripting (XSS).
La propiedad innerHTML necesita más tiempo para la ejecución
Conclusión
Debemos evitar el uso de innerHTML y usar en su lugar textContent. Si necesitamos mofificar el HTML del DOM, La alternativa es usar document.createElement() y appendChild()
let enfasis = document.createElement("strong")
enfasis.textContent = "Vamos a darle a Javascript"
document.getElementById('salida').appendChild(enfasis)