Postagens
Não informado
Posted by Nesse meu primeiro tutorial, vou mostrar como se cria lementos (tags) dinâmicamente e também mostrarei como exclui-las.
Vamos lá.
Primeiro vamos criar nosso html (aqui não tem segredo):
<html> <head> <title>Criando elementos dinâmicamente</title> </head> <body> <button onClick="criar()">Criar elemento</button> <button onClick="deletar()">Excluir Elemento</button> <div id="corpo"></div> </body> </html>
Criamos uma página com dois botões. Agora vamos ao javascript.
<html>
<head>
<title>Criando elementos dinâmicamente</title>
<script type="text/javascript">
function criar(){
//onde o elemento será adicionado
pai = document.getElementById("corpo");
//definimos qual elemento queremos criar
elem = document.createElement("h1");
//Definimos o texto do elemento.
txt = document.createTextNode("Texto criado dinamicamente "+pai.childNodes.length);
//adicionamos o texto no elemento
elem.appendChild(txt);
//adicionamos o elemento com o texto na div corpo
pai.appendChild(elem);
}
function deletar(){
//se não existir elementos h1 ele não faz nada.
if (pai.childNodes.length != 0){
//de onde o elemento será deletado
pai = document.getElementById("corpo");
//como o elemento h1 é filho do elemento corpo usamos o childNodes[x]
//para deletarmos.
elem = pai.childNodes[pai.childNodes.length-1];
//remove o elemento
elem.removeNode(true);
}
}
</script>
</head>
<body>
<button onClick="criar()">Criar elemento</button>
<button onClick="deletar()">Excluir Elemento</button>
<div id="corpo"></div>
</body>
</html>
Usei o pai.childNodes.length para ver quantos elementos filhos a div corpo tem.
É bem simples!
Espero ter ajudado.
Dica: mude a linha elem = document.createElement("h1"), incluindo outras tags.
Abraços
- JeffMalm likes this
