Como manipular componente html com Javascript.
Neste tutorial mostro como adicionar ou remover um componente html com Javascript.
Introdução
Este tutorial tem como objetivo mostrar como manipular componente Html com Javascript, será um breve tutorial utilizando os conceitos de manipulação do dom do Javascript.
O intuito é demonstrar de uma forma rápida, pratica e fácil de como podemos manipular os componentes do Html utilizando apenas o Javascript.
Pois aprender como manipular os componentes do Html é essencial para todo programador Frontend, que deseja construir aplicações dinâmicas.
Como adicionar um componente Html utilizando Javascript
Para execução deste tutorial vou utilizar a função createElement() do javascript, para criar o elemento que será inserido na página e irei utilizar também a função appendChild(), que será responsável por adicionar o elemento criado ao corpo de outro elemento.
Logo abaixo mostro o código que criei com a função responsável por adicionar um elemento a uma div:
function adicionarComponente() {
// Obtém o elemento pai
const elementoPai = document.getElementById('elementoPai');
// Criar o elemento
const elementoFilho = document.createElement('button');
//Adiciona os atributos do elemento
elementoFilho.id = "elementoFilho";
elementoFilho.innerHTML = "botão teste";
elementoFilho.type = "button";
elementoFilho.class = "btn-impressao";
// Insere (anexar) o elemento filho (botao) ao elemento pai (div)
elementoPai.appendChild(elementoFilho);
};
Vamos para explicação da função que acabei de criar:
- No inicio da função obtemos o id do elemento pai utilizando para isso a função
getElementById(elementoPai); - Logo depois crio o elemento filho que será adicionado ao elemento pai com a função
createElement('button'),neste caso será criado no elemento pai um botão; - Em seguida atribuo os atributos do elemento filho (button) criado, no elemento filho defino os atributos
tipo(type), a class do css(class) , o valor(innerHTML) e o id(id); - E por último insiro o elemento criado(elementoFilho) ao elemento pai com a função
appendChild(elementoFilho);
Pronto com isso já podemos adicionar a função que removerá um componente html utilizando Javascript
Para conseguirmos remover um elemento html utilizando o Javascript vamos utilizar a função remove() que é disponibilizada pelo Javascript.
Logo abaixo mostro a função que criei para remover um elemento html:
function removerComponente() {
document.getElementById("elementoFilho").remove();
};
Vamos para explicação da função acima:
Ao implementar a função acima foi utilizei a função getElementById(), que será responsável por obter o componente a ser removido passando como parametro a informação do id deste elemento
E junto com a função getElementById utilizo a função remove(), que será responsável por remover o elemento Html da tela.
Conclusão
Este foi um breve exemplo de como podemos adicionar ou remover um elemento de uma página em Html, logo abaixo mostro o código completo que foi utilizado neste tutorial.
<html>
<head>
<title>Document</title>
<script type="text/javascript" >
function removerComponente() {
document.getElementById("elementoFilho").remove();
};
function adicionarComponente() {
// Obtém o elemento pai
const elementoPai = document.getElementById('elementoPai');
// Criar o elemento
const elementoFilho = document.createElement('button');
//Adiciona os atributos do elemento
elementoFilho.id = "elementoFilho";
elementoFilho.innerHTML = "botão teste";
elementoFilho.type = "button";
elementoFilho.class = "btn-impressao";
// Insere (anexar) o elemento filho (botao) ao elemento pai (div)
elementoPai.appendChild(elementoFilho);
};
</script>
</head>
<body>
<button type="button"
onClick="adicionarComponente();" >
Adicionar Componente
</button>
<button type="button"
onClick="removerComponente();" >
Remover Componente
</button>
<div id="elementoPai" >
<button type="button" id="elementoFilho" >botão teste</button>
</div>
</body>
</html>
