Eu fiz um formulário onde um botão chama a função "addproduto()" nesta função eu crio 1 div e 2 textbox que são colocadas no mesmo div, e depois adiciono o div a um span no final da pagina.
A função funciona perfeitamente quando se trata de adicionar a div e as textboxes, só que quando eu clico no botão de novo e uma das textboxes adicionadas anteriormente já está preenchida, o que estiver escrito apaga e ela fica em branco.
Não faço idéia do porque disto ocorrer, achava que era pelo fato de que os "names" das textboxs serem organizados como array, mas parece que não é. aqui está o código:
var contador = 1;
function addproduto()
{
var div = document.createElement("div");
contador = contador + 1;
var nome = document.createElement("input");
var qtd = document.createElement("input")
div.setAttribute("id", contador);
nome.setAttribute("type", "text");
nome.setAttribute("name", "nome[]");
qtd.setAttribute("type", "text");
qtd.setAttribute("name", "qtdprod[]");
var spanlugar = document.getElementById("lugar");
//coloca os elementos no ultimo lugar da nova div e entre eles os textos
div.innerHTML = div.innerHTML + "Nome do produto " + contador + ":" ;
div.appendChild(nome);
div.innerHTML = div.innerHTML + "<br> Quantidade:";
div.appendChild(qtd);
//colca o div no ultimo lugar do span.
spanlugar.appendChild(div);
spanlugar.innerHTML = spanlugar.innerHTML + "<br>";
}