Problema com innerHtml

[renatonp 0]

Eu estou com um código que quando o usuário clica no Botão Adicionar ele adiciona uma dicv com alguns campos de formulário. Mas estou com um problema que o usuário não consegue adicionar e ir preenchendo os campos porque quando ele clica em adicionar no item 3 se os campos do item 2 estiverem preenchidos eles são apagados. Então o usuário precisa adicionar todos os ítens que precisa e só depois começar a preencher, mas é claro que é mais cômodo ir adicionando e preenchendo. Segue o código:

 

<script type="text/javascript">
var i=1;
function adicionar()
{
i++;
document.getElementById("div_formulario").innerHTML+="<P id='item"+i+"'><font face='Verdana' size=2 color='#FF7F00'><strong>Item "+i+":</strong></font><br /><br /><font face='Verdana' size=2 color='#FF7F00'>Quantidade para impressão:</font> <input type='text' size=4 name='quantidade[]' id='quantidade'><br /><br /><font face='Verdana' size=2 color='#FF7F00'>Formatos:</font><br /><select name='formato[]' id='formato_sub_item"+i+"' onchange='controla_capa_sub_item("+i+");'><option value=''>Selecione um formato</option><?php for($i=0;$i<$linhas_formatos;$i++) { $valor = mysql_result($query_formatos,$i,'valor'); $descricao = mysql_result($query_formatos,$i,'descricao'); ?> <option value='<?=$valor?>'><?=$descricao?></option> <?php } ?> </select><br /><br /><font face='Verdana' size=2>Selecione os arquivos de:</font><br /><span id='span_capa_sub_item"+i+"'><font face='Verdana' size=2 color='#FF7F00'>Capa:</font> <input type='file' name='arq_capa[]' id='arq_capa'></span><br /><font face='Verdana' size=2 color='#FF7F00'>Miolo:</font> <input type='file' name='arq_miolo[]' id='arq_miolo'><br /><br /><font face='Verdana' size=2 color='#FF7F00'>Número de páginas:</font>             <input type='text' size=5 name='paginas[]' id='paginas_sub_item"+i+"'></P><hr width='100%' height='5' color='#FF7F00' id='linha"+i+"'>";
}
function remover()
{
document.getElementById("div_formulario").removeChild(document.getElementById("item"+i));
document.getElementById("div_formulario").removeChild(document.getElementById("linha"+i));
}
</script>

[William Bruno 1501]

no lugar de innerHTML use appendChild()