Al agregar campos text con javascript se borra el contenido

Cuando agrego campos del tipo input text mediante javascript los campos del formulario se borran

mi codigo es el siguiente

Código Javascript :

var textBoxNro = 1;

function addTextBox() {
var obj = document.getElementById("texto");
obj.innerHTML += "<tr id="+textBoxNro+"><td><input type='text' name='cantidad_"+textBoxNro+"' size='20' /></td><td><input type='text' name='tipo_"+textBoxNro+"' size='20' /></td><td><input name='cod_"+textBoxNro+"' type='text' size='5' /></td><td><input type='text' name='medida_"+textBoxNro+"' size='10' /></td><a href ='#' onClick='borrarBox("+textBoxNro+")'>Borrar</a></tr>";
textBoxNro++;
document.getElementById('total').value = textBoxNro;
}
function borrarBox(n1){
var cod = document.getElementById(n1);
var padre = cod.parentNode;
padre.removeChild(cod);
textBoxNro--;
document.getElementById('total').value = textBoxNro;
}

y mi codigo html es:

Código HTML :

<form id="form2" name="form2" method="post" action="contacto.php">
    <table width="54%" border="0" id="texto">
  <tr>
    <td width="15%">Nombre o Empresa</td>
    <td colspan="3"><label>
      <input type="text" name="nom" id="nom" />
    </label></td>
    </tr>
  <tr>
    <td>Tel&eacute;fono o Celular</td>
    <td colspan="3"><label>
      <input type="text" name="fono" id="fono" />
    </label></td>
    </tr>
  <tr>
    <td>E-mail</td>
    <td colspan="3"><label>
      <input type="text" name="mail" id="mail" />
    </label></td>
    </tr>
  <tr>
    <td>Ciudad</td>
    <td colspan="3"><input type="text" name="ciudad" id="ciudad" /></td>
    </tr>
  <tr>
    <td>Cantidad</td>
    <td>Tipo Cierre</td>
    <td>Codigo Color</td>
    <td>Medida</td>
  </tr>
  <tr>
    <td><input type="text" name="cantidad_0" id="cantidad_0" /></td>
    <td width="15%"><input type="text" name="tipo_0" id="tipo_0" /></td>
    <td width="70%"><input name="cod_0" type="text" id="cod_0" size="5" /></td>
    <td width="70%"><input type="text" name="medida_0" id="medida_0" size="10" /></td>
  </tr>
</table>
<center><a href="#" onclick="addTextBox();">Agregar</a><br />
Luego de ser enviado ser&aacute; redirigido autom&aacute;ticamente al inicio
<br />
<input type="button" name="button" id="button" value="Enviar" onclick="validar_form2()" />
<input type="hidden" name="total" id="total" />
</center>
      
</form>

ojala me puedan ayudar
saludos desde ya
gracias

hola no manejo mucho javascript y tampoco entendi mucho lo que se te borran los input ya que yo probe tu codigo y me funciono lo mas bien-

un problema que podes estar teniendo es que usas innerHTML y esa es una propiedad que solo se usa en internet explorer, para mi tendrias que dejar eso para la gente con ie y para la gente que utiliza firefox opera o safari utilizar el dom.
te va a ser mucho mas tedioso el programarlo pero te va a funcionar a la perfeccion.
seria algo asi:

var obj = document.getElementById("texto");
tr = document.createElement('tr');
tr.setAttribute('id', textBoxNro);
td1 = document.createElement('td');
tr.appendChild(td1);
a = document.createElement('a');
txt = document.createTextNode('Sitio Web');
a.appendChild(txt);
a.setAttribute('href', 'www.spedevigner.com');
td1.appendChild(a);
obj.appendChild(tr);

vas creando parte por parte y uniendolas, capaz pensandola un poco se puede crear un loop for para crear las 4 td usando un vector que tenga lo que va dentro de cada uno.

Gracias por tu respuesta

denada, ojala te haya servido.
otra cosa que me olvide decirte es podrias averiguar un poco sobre jquery que te va a facilitar y mucho con el dom de javascript escribiendo menos y logrando lo mismo.

Suerte