Javascript: elementos dinâmicos
De Aulas
Afluentes: Desenvolvimento Front-end I, Usabilidade, desenvolvimento web, mobile e jogos.
Elementos Dinâmicos
É possível, com o uso de Javascript, adicionar e remover qualquer tipo de elemento HTML de uma página.
Adicionando Elementos
<!DOCTYPE html>
<html>
<head><title> Elementos Dinâmicos </title></head>
<body>
<h1>Adicionar texto</h1>
<p>
Digite o texto:
<input type="text" id="input">
<button onclick="adicionar();">Adicionar</button>
</p>
<div id="conteudo"></div>
<script>
function adicionar() {
const input = document.getElementById("input");
const p = document.createElement("p");
p.appendChild(document.createTextNode(input.value));
const conteudo = document.getElementById("conteudo");
conteudo.appendChild(p);
input.value = "";
}
</script>
</body>
</html>
Veja que cria um parágrafo e adicionamos o texto usando um método chamado createTextNode ao invés do p.innerHTML. Isso porque esse método de entrada é mais apropriado e seguro para o caso de entradas dinâmicas.
Removendo Elementos
O exemplo a seguir remove um elemento da página html.
<!DOCTYPE html>
<html>
<head><title> Elementos Dinâmicos </title></head>
<body>
<h1>Remover Elementos</h1>
<button onclick="remover();">Remover</button>
<div id="conteudo">
<p id="texto">Texto que será removido....</p>
</div>
<script>
function remover() {
const pai = document.getElementById("conteudo");
const filho = document.getElementById("texto");
pai.removeChild(filho);
}
</script>
</body>
</html>
Adicionando e Removendo Dinamicamente
<!DOCTYPE html>
<html>
<head><title>Incluindo e Excluindo Elementos</title></head>
<body>
<h1>Cadastro de Itens</h1>
Texto: <input type="text" id="texto">
<button onclick="adicionar();">Adicionar</button>
<ul id="lista"></ul>
<script>
var id = 0; // Variável global para controle de IDs
function adicionar() {
const texto = document.getElementById("texto");
const lista = document.getElementById("lista");
const item = document.createElement("li");
// Adiciona um ID único ao item e incrementa o contador
item.id = `item_${id++}`;
item.appendChild(document.createTextNode(texto.value));
// Cria o botão de remover e o adiciona ao item
const button = document.createElement("button");
button.innerHTML = "X";
button.setAttribute("onclick", `remover("${item.id}");`);
item.appendChild(button);
lista.appendChild(item);
texto.value = ""; // Limpa o campo de texto
texto.focus(); // Foca no campo de texto
}
function remover(id) {
const lista = document.getElementById("lista");
const item = document.getElementById(id);
lista.removeChild(item);
}
</script>
</body>
</html>
Veja que para colocarmos um texto no botão usamos o innerHTML e não o createTextNode. Não que não podemos usar o createTextMode como fizemos no exemplo anterior, mas é que como o texto do botão não é dinâmico, fica mais tranquilo usar o innerHTML.
Atividades
Atividade 1
- Crie um documento HTML
- Adicione um título H1 na página com texto vazio
- Adicione um campo texto de entrada com label Nome
- Altere dinâmicamente o título H1 sempre que o usuário digitar qualquer coisa no campo texto
Atividade 2
- Crie um código HTML
- Crie um campo texto e um botão ENVIAR
- crie uma lista (bullets) vazia
- Ao clicar no botão ENVIAR, adiciona um ítem na lista com o conteúdo do campo texto e apague o conteúdo do campo texto
Atividade 3
- Crie um código HTML
- Crie três campos de entrada (nome, telefone, e-mail)
- Crie dois botões (adicionar, limpar)
- Crie uma tabela com três colunas e com os títulos Nome, Telefone e E-mai
- Ao entrar com informações nos campos texto e clicar no botão adicionar, é criada uma linha na tabela e são adicionados os dados que estavam nos campos de texto e os campos de texto são limpos
- Ao clicar no botão limpar, exclui todas as linhas da tabela, menos a linha de título
