JavaScript Academy · Aula

Alterando texto e conteúdo HTML

Atualize o conteúdo com textContent e innerHTML.

Alterando texto e conteúdo HTML é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

Lendo e escrevendo texto

Para alterar o que um elemento exibe, você pode definir seu texto ou seu HTML. A escolha certa depende de você precisar de marcação e de quanto confia nos dados.

textContent

textContent obtém ou define o texto bruto de um elemento. Defini-lo substitui todos os filhos por um único nó de texto e trata a entrada como texto simples.

const el = document.querySelector("#status");
el.textContent = "Saved!";

textContent escapa a marcação

Por ser texto simples, qualquer HTML na cadeia de caracteres é exibido literalmente, e não analisado. Isso o torna seguro contra injeção.

el.textContent = "<b>hi</b>";
// displays the literal characters <b>hi</b>

innerHTML

innerHTML obtém ou define a marcação HTML dentro de um elemento. Defini-lo analisa a cadeia de caracteres como HTML e cria nós de verdade.

const box = document.querySelector("#box");
box.innerHTML = "<strong>Done</strong>";

innerHTML substitui tudo

Atribuir um valor a innerHTML descarta os filhos existentes e reconstrói a subárvore a partir da nova marcação.

box.innerHTML = "<ul><li>One</li><li>Two</li></ul>";

O perigo do XSS

Nunca coloque entrada de usuário não confiável em innerHTML. Uma cadeia de caracteres maliciosa pode injetar scripts ou manipuladores de eventos, uma vulnerabilidade chamada XSS.

const userInput = getInput();
// DANGEROUS:
// box.innerHTML = userInput;
// SAFE:
box.textContent = userInput;

innerText

innerText é semelhante a textContent, mas considera os estilos: ele reflete o texto renderizado e ignora elementos ocultos.

console.log(el.innerText); // visible text only

textContent versus innerText

textContent retorna todo o texto, inclusive o conteúdo oculto, e é mais rápido porque não aciona o cálculo da disposição. innerText considera a disposição e é mais lento.

el.textContent; // all text, even display:none
el.innerText;   // only what is visually rendered

Adicionando texto com segurança

Para adicionar texto sem apagar os nós existentes, crie um nó de texto ou use insertAdjacentText em vez de substituir textContent.

el.append(document.createTextNode(" extra"));
el.insertAdjacentText("beforeend", " more");

Inserindo HTML sem analisar novamente

insertAdjacentHTML adiciona marcação em uma posição sem analisar novamente o elemento inteiro, o que é mais eficiente que reconstruir innerHTML.

box.insertAdjacentHTML("beforeend", "<li>New item</li>");

Escolhendo a propriedade certa

Use textContent para texto simples, a opção segura padrão; innerHTML somente com marcação confiável; e innerText quando precisar especificamente de texto renderizado e visível.

Verificação rápida

Escolha a abordagem segura.

Recapitulação

textContent define texto simples e escapado, sendo a opção segura padrão. innerHTML analisa a marcação, mas apresenta risco de XSS com entradas não confiáveis. innerText reflete somente o texto visível e renderizado. Para adicionar conteúdo, prefira insertAdjacentHTML/insertAdjacentText em vez de substituir o elemento inteiro.

Perguntas Frequentes

A aula “Alterando texto e conteúdo HTML” é grátis?

Sim — o texto completo de “Alterando texto e conteúdo HTML” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Alterando texto e conteúdo HTML”?

Atualize o conteúdo com textContent e innerHTML. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Alterando texto e conteúdo HTML”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy