Questão de Programação — HTML (HyperText Markup Language) — FUNDATEC 2024

JavaScript: manipulação do DOM com innerHTML

Gabarito: letra A. Ao clicar no botão "Tente", o navegador exibirá >Clicou> porque o código JavaScript atribui à propriedade innerHTML do elemento <p> o valor ">Clicou>", substituindo completamente o conteúdo anterior do parágrafo. A alternativa correta reflete exatamente o novo conteúdo definido pelo script, sem o texto original "Minha primeira Web Page" e sem o texto "Tente" do botão.

O innerHTML é uma propriedade do DOM (Document Object Model) que permite ler ou definir o conteúdo HTML de um elemento. Quando você atribui um valor a innerHTML, o navegador substitui todo o conteúdo interno do elemento pelo novo valor, interpretando as tags HTML que estiverem presentes. É uma das formas mais comuns de manipular dinamicamente o conteúdo de uma página web com JavaScript, mas exige cuidado: como o valor é interpretado como HTML, qualquer string atribuída pode alterar a estrutura da página.

No código da questão, o elemento <p> provavelmente inicia com o texto "Minha primeira Web Page". Ao clicar no botão, o script executa algo como document.getElementById("demo").innerHTML = ">Clicou>". O resultado é que o parágrafo passa a conter apenas >Clicou>, pois o innerHTML substitui o conteúdo anterior. O texto "Tente" pertence ao botão (<button>Tente</button>) e não é afetado pela manipulação do parágrafo.

A pegadinha clássica desta questão é confundir o que é substituído com o que é adicionado. O innerHTML não concatena — ele substitui. Muitos candidatos imaginam que o texto antigo permanece ou que o texto do botão aparece junto, mas a atribuição simples sobrescreve o conteúdo do elemento alvo. Além disso, o símbolo > no valor atribuído é apenas um caractere de texto, não uma tag HTML, então ele é exibido literalmente.

Guarde a distinção entre innerHTML (substitui o conteúdo interpretando HTML), textContent (substitui o conteúdo como texto puro) e appendChild() (adiciona um novo nó ao final). É exatamente essa fronteira entre substituir e adicionar que separa as alternativas desta questão.

Alternativa A — ✅ Correta ⟵ GABARITO

A alternativa A (>Clicou>) é exatamente o valor atribuído ao innerHTML do parágrafo. Ao clicar no botão, o conteúdo do elemento <p> é substituído por >Clicou>, e é isso que o navegador exibe. O > inicial e final são caracteres literais do texto, não tags HTML, então aparecem como parte do conteúdo visível.

Alternativa B — ❌ Incorreta

A alternativa B (>Clicou>Tente) adiciona o texto "Tente" ao resultado, mas o texto do botão não é incluído na manipulação do parágrafo. O innerHTML substitui apenas o conteúdo do elemento alvo (<p>), e o botão permanece com seu texto original. Não há concatenação entre o novo conteúdo e o texto do botão.

Alternativa C — ❌ Incorreta

A alternativa C (Tente) mostra apenas o texto do botão, ignorando completamente a manipulação do parágrafo. O clique no botão dispara o script que altera o <p>, então o resultado exibido é o novo conteúdo do parágrafo, não o texto do botão.

Alternativa D — ❌ Incorreta

A alternativa D (Minha primeira Web Page>Clicou>) mantém o texto original do parágrafo e adiciona o novo conteúdo. Isso seria o comportamento de uma concatenação (como innerHTML += ">Clicou>"), mas o código usa atribuição simples (=), que substitui o conteúdo anterior. O texto "Minha primeira Web Page" é removido.

Alternativa E — ❌ Incorreta

A alternativa E (Minha primeira Web Page>Clicou>Tente) combina os dois erros anteriores: mantém o texto original e adiciona o texto do botão. O innerHTML com atribuição simples substitui o conteúdo do parágrafo, e o texto do botão não é afetado. Nenhum dos dois elementos permanece no resultado.

Gabarito: letra A