Javascript: elementos dinâmicos
De Aulas
Revisão de 13h57min de 15 de abril de 2024 por Admin (discussão | contribs) (→Adicionando e Removendo Dinamicamente)
Afluentes: Desenvolvimento Front-end I, Desenvolvimento Front-end II, 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
