Olá,
Primeiramente, parabéns pela excelente curso. Uma dúvida. Qual a diferença entre "innerHTML" , "innerText" e "textContent" e quando utilizá-los? Fiz alguns testes e vi que consigo fazer get e set nestes atributos.
ex.
console.log("InnerHTML: " + tituloH2.innerHTML);
console.log("innerText: " + tituloH2.innerText);
console.log("textContent: " + tituloH2.textContent);hoje, com a Alura e o Google Gemini
A diferença está no retorno deles.
innerText -> Retorna somente o texto, sem formatações ou elementos html.
innerHtml -> Retorna o texto, COM formatações e COM elementos html.
textContent -> Retorna o text COM formatações, mas sem os elementos html.
Pelo que testei, fazer o set não tem diferença - ele sempre altera o conteúdo do elemento de forma "igual". Mas para obter tu tem esses diferenças mencionadas acima. Veja o seguinte código:
<!DOCTYPE html>
<html>
<body>
<h3>Differences between innerText, innerHTML and textContent.</h3>
<p id="demo"> This element has extra spacing and contains <span>a span element</span>.
</p>
<button onclick="getInnerText()">Get innerText</button>
<button onclick="getHTML()">Get innerHTML</button>
<button onclick="getTextContent()">Get textContent</button>
<p id="demo"></p>
<script>
function getInnerText() {
alert(document.getElementById("demo").innerText);
}
function getHTML() {
alert(document.getElementById("demo").innerHTML);
}
function getTextContent() {
alert(document.getElementById("demo").textContent);
}
</script>
</body>
</html>
Link de referência: https://www.w3schools.com/jsref/prop_node_innertext.asp