JavaScript criando elementos HTML dinamicamente

Abril 17, 2008

Hoje vamos ver como criar elementos HTML dinamicamente em JavaScript.

Vamos começar!

Nós precisamos criar uma estrutura básica de um documento HTML. Digite o segundo código:


<html>
<head>
</head>

<body>

  <form method="post" name="my_form" id="my_form" action="">

    <input type="button" value="Criar campo texto" name="add_input" id="add_input" />

    <br />
    <br />

    <div id="add_input_div"></div>

  </form>

</body>
</html>

Com esse código nós criamos a estrutura básica de um documento HTML, criamos um formulário chamado “my_form”. Dentro do formulário nós criamos um botão com o texto “Criar campo texto”. Foi criado também um div com o id “add_input_div”, nesse div que nós iremos inserir os elementos gerando dinamicamente via JavaScript.

É a idéia é a seguinte quando o usuário clicar no botão “Criar campo texto” será adicionado um novo campo de texto dentro do div “add_input_div”.

Bom chega de papo e vamos fazer a mágica acontecer.

Dentro das tags:


<head>
</head>

Digite o seguinte código:


<script language="JavaScript">
var input_cont = 0;

function addInput()
{
  var input = document.createElement('input');
  input.setAttribute('type', 'text');
  input.setAttribute('name', 'new_input_'+input_cont);
  input.setAttribute('id', 'new_input_'+input_cont);
  input.setAttribute('value', '');

  var add_input_div = document.getElementById('add_input_div');
  add_input_div.appendChild(input);

  input_cont++;
}

</script>

Esse é o código JavaScript responsável por criar os campos de texto dinamicamente, daqui a pouco vamos entender como ele funciona.

Agora vamos fazer o nosso botão chamar esse código JavaScript, para isso temos que inserir o evento “onclick” no nosso botão, para que quando o botão seja clicado um novo campo texto seja gerado.

Adicione na tag do botão o seguinte código para ficar dessa forma:


<input type="button" value="Criar campo texto" name="add_input" id="add_input" onclick="addInput()" />

Você percebeu que foi adicionado:


onclick="addInput()"

Esse cara que irá chamar a função JavaScript addInput() que criamos no cabeçalho da página.

Pronto! Fazendo isso você já irá conseguir gerar campos texto dinamicamente e obter esse resultado:

Agora vamos entender o JavaScript que faz isso.

No inicio é criado a variável input_cont, o objetivo dela é armazenar o número de inputs gerado e usar o seu valor para dar nome para o novo input criado.


var input_cont = 0;

No final da função addInput() existe a linha:


input_cont++;

Essa linha incrementa o contador.

Vamos ver o que as seguintes linhas fazem:


  var input = document.createElement('input');
  input.setAttribute('type', 'text');
  input.setAttribute('name', 'new_input_'+input_cont);
  input.setAttribute('id', 'new_input_'+input_cont);
  input.setAttribute('value', '');

Na primeira linha de código acima usando o document.createElement nós dizemos que queremos criar um novo elemento do tipo input e atribuímos essa criação a uma variável chamada input.

Com essa variável input nós podemos definir as propriedades do input, para fazer isso é usado o método setAttribute onde o primeiro argumento é o nome da propriedade e segundo argumento é o seu valor.

Você ira perceber que é muito usado isso no código:


'new_input_'+input_cont

Esse código faz apenas uma concatenação de string para obter o nome do novo input criado.

Fazendo isso nós criamos todas as propriedades que tem um input, mas ele ainda não será visível na tela. Por isso precisamos do div “add_input_div”, nós precisamos dizer para o JavaScript que queremos inserir o input criado dentro desse div.

O código abaixo faz isso:


  var add_input_div = document.getElementById('add_input_div');
  add_input_div.appendChild(input);

O método getElementById obtém um elemento HTML passando o seu id. Depois nós dizemos que queremos incluir o input criado dentro do div usando:


add_input_div.appendChild(input);

O método appendChild adiciona um novo nó filho dentro do div, no caso o input criado via JavaScript.

Posted by patrickespake Filed in JavaScript
Tags: , , , , , , , , , , , , ,

2 Responses to “JavaScript criando elementos HTML dinamicamente”

  1. Rafael Says:
    Julho 2, 2008 at 2:10 am

    Olá parabéns pelo POST, bem interessante…
    Porém amigo se puder me esclarecerr a seguinte dúvida
    Com campos criados e inseridos via JS, como fazer para pegar os valores deles via $_FILE, no caso da inserção de várias fotos?
    Desde já agradeço e aguardo os próximos posts =]

  2. patrickespake Says:
    Julho 2, 2008 at 2:24 am

    Tanto as variáveis $_POST, $_GET e $_FILE elas retorna uma array com os elementos do formulário.

    Se você criar os campos com o nome obedecendo um padrão, por exemplo:

    arquivo_1
    arquivo_2
    arquivo_3
    …

    Você pode fazer um for e navegar por esses dados dos campos, por exemplo:

    for($i = 0; $i < count($_FILE); $i++)
    {
    echo $_FILE["arquivo_{$i}"]
    }

    É possível fazer algo desse tipo.

    Obrigado.
    Abraço.

Leave a Reply