O mais indicado seria usar o método createElement
(criar um elemento de forma dinâmica). Isso porque ao usar o innerHTML
, os valores digitados em todos os campos serão apagados. Agora, para tornar o procedimento mais fácil, crie um span
com um id
onde serão inseridos os novos campos:
<span id="valores">
valor 2: <input type="text" name="valor2" />
</span>
O span
é útil nesses casos porque ele serve como um contêiner de referência e não afeta o layout.
Veja como ficaria (comentários explicativos no código):
var botao = document.getElementById("btn");
botao.addEventListener('click', function() {
// pega a span pelo id
var vals = document.getElementById("valores");
// cria a tag <br>
var br = document.createElement("br");
// insere no span
vals.appendChild(br);
// pega todos os inputs dentro do span
var qtd = document.querySelectorAll("#valores input");
// como já tem um, soma com 2 para criar uma contagem sequencial
var names = qtd.length + 2;
// cria o nó de texto
var lab = document.createTextNode("Valor "+ names +": ");
// insere no span
vals.appendChild(lab);
// cria o input
var inp = document.createElement("input");
// cria atributo "type"
inp.type = "text";
// cria atributo "name" com o valor sequencial
inp.name = "valor"+names;
// insere no span
vals.appendChild(inp);
});
Valor do produto:<input type="text" name="valor1" />
<br />
<span id="valores">
valor 2: <input type="text" name="valor2" value="10,20" />
</span>
<br />
valor final: <input type="text" name="valor final" />
<br/>
<button id="btn">Adicionar novo valor</button>