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 id="corpo">
<h1>Adicionar Elementos</h1>
<p>
Digite o texto:
<input type="text" id="texto">
</p>
<p>
<button onclick="adicionar()">Adicionar</button>
</p>
<script>
function adicionar() {
var texto = document.getElementById("texto");
var para = document.createElement("p");
para.innerHTML = texto.value;
var corpo = document.getElementById("corpo");
corpo.appendChild(para);
texto.value = "";
}
</script>
</body>
</html>
Removendo Elementos
O exemplo a seguir remove um elemento da página html.
<!DOCTYPE html>
<html>
<head><title>Elementos Dinâmicos</title></head>
<body id="corpo">
<h1>Remover Elemento</h1>
<button onclick="remover()">Remover</button></p>
<p id="texto">Texto que será removido...</p>
<script>
function remover() {
var pai = document.getElementById("corpo");
var filho = document.getElementById("texto");
pai.removeChild(filho);
}
</script>
</body>
</html>
Adicionando e Removendo Dinamicamente
<!DOCTYPE html>
<html>
<head>
<title>Elementos Dinâmicos</title>
</head>
<body id="corpo">
<h1>Adicionar Elementos</h1>
<p>
Digite o texto:
<input type="text" id="texto" />
</p>
<p>
<button onclick="adicionar()">Adicionar</button>
</p>
<script>
var id = 0;
function adicionar() {
var texto = document.getElementById("texto");
var para = document.createElement("p");
para.id = "para_" + id++;
para.innerHTML = texto.value + " " + para.id;
var button = document.createElement("button");
button.setAttribute("onclick", "remover('" + para.id + "');");
button.innerHTML = "X";
para.appendChild(button);
var corpo = document.getElementById("corpo");
corpo.appendChild(para);
texto.value = "";
}
function remover(id) {
var pai = document.getElementById("corpo");
var filho = document.getElementById(id);
pai.removeChild(filho);
}
</script>
</body>
</html>
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
