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.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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!