qual seria melhor para usar
1 - document.querySelector("#titulo").innerHTML = "Título Modificado com JavaScript!";
ou o que instrutor disse...
me explique
ou não teria diferença alguma.
qual seria melhor para usar
1 - document.querySelector("#titulo").innerHTML = "Título Modificado com JavaScript!";
ou o que instrutor disse...
me explique
ou não teria diferença alguma.
Bom dia, Lais!
Tudo bom?!
Por gentileza, poderia me dizer qual outra abordagem o instrutor sugeriu ao modificar o conteúdo do elemento?
Sobre a 1° opção acima (document.querySelector("#titulo").innerHTML = "Título Modificado com JavaScript!";) é uma opção comum para selecionar e modificar conteúdo de um elemento dinamicamente com JS, onde o innerHTML permite a inserção de tags HTML no conteúdo como exemplo abaixo:
document.querySelector(".titulo").innerHTML = "<strong>Título Modificado com JS!</strong>";
Outra opção é utilizando o textContent para a saída do conteúdo. Diferente do innerHTML o textContent não interpreta html, somente texto, o que impossibilita o uso de tags no conteúdo, como no exemplo abaixo:
document.querySelector(".titulo").textContent = "Título Modificado com JS!";
Quando usar innerHTML e textContent?
Usamos inner quando precisamos inserir e modificar conteúdo html dinâmico e de forma segura, onde o conteúdo ali é seguro, mas se o conteúdo não for devidamente sanitizado, fica suscetível a ataques de XSS.
Usamos text quando tratamos apenas o conteúdo, sem a necessidade de modificar/incluir html, todo o conteúdo é trato como texto.
Espero ter ajudado! Qualquer dúvida, estou a disposição!