Añadir campos a un formulario DOM

[Operadormail]

Hola a todos

Llevo algunos días intentando aclararme con el DOM para poder añadir unos campos de formulario haciendo click en un boton, pero no consigo nada y estoy desesperado. ¿Podría alguien decirme como hacer una función en javascript para añadir los siguientes campos a un formulario?

Estos son los campos que necesito replicar cada vez que se haga click al boton "Añadir otro registro"

Código:

<tr>      
        <td height="25" align="right" class="texto">Referencia:&nbsp;</td>
        <td height="25"><input name="ref1" type="text" size="15" maxlength="15"></td>
      </tr>
      <tr>      
        <td height="25" align="right" class="texto">Altura mm:&nbsp;</td>
        <td height="25"><input name="altura1" type="text" size="15" maxlength="15"></td>
      </tr>
      <tr>      
        <td height="25" align="right" class="texto">Espesor mm:&nbsp;</td>
        <td height="25"><input name="espesor1" type="text" size="15" maxlength="15"></td>
      </tr>
      <tr>      
        <td height="25" align="right" class="texto">Color cuerpo:&nbsp;</td>
        <td height="25"><input name="cuerpo1" type="text" size="15" maxlength="15"></td>
      </tr>
      <tr>      
        <td height="25" align="right" class="texto">Color peana:&nbsp;</td>
        <td height="25"><input name="peana1" type="text" size="15" maxlength="15"></td>
      </tr>
      <tr>      
        <td height="25" align="right" class="texto">Foto:&nbsp;</td>
        <td height="25"><input name="imagen1" type="file" size="25"></td>
      </tr>

Gracias anticipadas por la ayuda

[masterojitos]

busca sobre appendChild....

[Operadormail]

si he leido un monton al respecto, pero no me sale nada... no consigo que se muestren los campos... Teneís algun ejemplo???

[bng5]

No es díficil, subí tu código javaScript que lo solucionamos.

[masterojitos]

mira en este ejemplo se crea una tabla y se va añadiendo las filas....... tu deberias analizar el codigo y crear una funcion que solo añade lo que desees.

Código html:

<script type="text/javascript">
    function cargarDatos(){
                    var capa=document.getElementById("panel");
                    capa.innerHTML="Cargando...";
 
                    //Creacion de la tabla
 
                    capa.innerHTML="";
                    var table = document.createElement('table');
                    table.style.width = '50%';
                    table.cellPadding="2";
                    table.cellSpacing="0";
                    table.border=1;
                    var tbody = document.createElement("tbody");
 
                    //Creacion de las cabezeras
 
                    var tr = document.createElement('tr');
                    
                    var td = document.createElement('th');
                    td.innerHTML  = "Codigo";
                    tr.appendChild(td);
                    
                    td = document.createElement('th');
                    td.innerHTML  = "Nombre";
                    tr.appendChild(td);
                    
                    td = document.createElement('th');
                    td.innerHTML  = "DNI";
                    tr.appendChild(td);
                    
                    tbody.appendChild(tr);
 
                    //Creacion de filas
 
                    tr = document.createElement('tr');
                        
                    td = document.createElement('td');
                    td.innerHTML  = "registro codigo";
                    tr.appendChild(td);
                        
                    td = document.createElement('td');
                    td.innerHTML  = "registro nombre";
                    tr.appendChild(td);
                        
                    td = document.createElement('td');
                    td.innerHTML  = "registro dni";
                    tr.appendChild(td);
                        
                    tbody.appendChild(tr);
 
                    table.appendChild(tbody);
                    capa.appendChild(table);
    }
 
</script>
<div id="panel">Espacio</div>
 

algo asi seria......... ya tu mismo eres.

suerte.

[bng5]

En realidad innerHTML es casi lo opuesto a usar DOM y no forma parte del estandar del W3C. Deberías usar document.createTextNode en su lugar.

Código:

// Incorrecto
td.innerHTML  = "Texto";

// Correcto
td.appendChild(document.createTextNode("Texto"));

El objeto Table cuenta con los métodos deleteRow() e insertRow() y a su vez el objeto TableRow cuenta con los métodos deleteCell() e insertCell(). Quizás resulten más sencillos de usar.