🚀 Capítulo 03: Alterando Conteúdo
🎯 Objetivo da Aula
Ao final desta aula, você saberá como mudar o texto e o HTML de um elemento na tela usando as propriedades innerText e innerHTML.
🏢 O Cenário Prático (Seu Desafio)
O painel de comunicação está quebrado! Ele continua mostrando “Status: Normal” mesmo com o ataque acontecendo. Seu desafio é mudar essa mensagem para ”🚨 ALERTA DE INVASÃO!” usando JavaScript!
🧠 Fundamentos: A Teoria Traduzida
Depois que você seleciona um elemento, você pode mudar o conteúdo dele usando duas propriedades principais:
1. innerText
Serve para mudar apenas o texto puro que está dentro da tag. O navegador vai tratar tudo o que você passar como texto comum.
- Exemplo:
elemento.innerText = 'Olá Mundo';
2. innerHTML
Serve para mudar o conteúdo aceitando tags HTML. O navegador vai interpretar as tags e renderizá-las.
- Exemplo:
elemento.innerHTML = '<strong>Atenção!</strong>';
📖 Exemplo Guiado: Mudando o Status
HTML:
<div id="status">Aguardando...</div>JavaScript:
const painel = document.getElementById('status');
// Mudando o texto
painel.innerText = '🚨 Alerta de Invasão!';
// Mudando com HTML
painel.innerHTML = '<span style="color: red;">🚨 Alerta Máximo!</span>';🛠️ Prática Obrigatória 1
Selecione o título do seu HTML e mude o texto dele para “Nova Ordem Jedi”.
🛠️ Prática Obrigatória 2
Use o innerHTML para colocar uma palavra em negrito dentro de um parágrafo.
🔑 Gabarito de Código/Fórmulas
Prática 1:
document.querySelector('h1').innerText = 'Nova Ordem Jedi';