Campos dinamicos - Objeto DOM

[quitos]

Hola a todos quiero compartir este codigo para crear campos dinamicos con objetos DOM.

Espero les ayude a generar campos de forma dinamica, despues agregare un javascript que valide de forma dinamica los campos generados, para solicitar los campos indispensables.

Código PHP:

  <script>
/*************** Comienza Agregar 4 Campos Dinamicos ************************/
camposmax=4;
 
var numero = 0;
var fn = 0;
var cont = 0;
limit=camposmax-1;
// Funciones comunes
c= function (tag) { // Crea un elemento
   return document.createElement(tag);
}
d = function (id) { // Retorna un elemento en base al id
   return document.getElementById(id);
}
e = function (evt) { // Retorna el evento
   return (!evt) ? event : evt;
}
f = function (evt) { // Retorna el objeto que genera el evento
   return evt.srcElement ?  evt.srcElement : evt.target;
}
 
function addField() {
    if(cont == limit){
        document.getElementById('addPest').style.display="none";
    }
    cont++;
    container = d('files');
    
    span = c('DIV');
    span.className = 'cssPesta';
    span.id = 'file' + (++numero);
    
    divclo = c('DIV');
    divclo.align ="right";
        imgclo = c('IMG');   
        imgclo.name = span.id;
        imgclo.src = 'images/fileclose.png';
        imgclo.onclick = removeField;
        imgclo.height = '15';
        imgclo.alt = 'x';
        imgclo.className = 'hand';
    
  divclo.appendChild(imgclo);
    
    divord = c('DIV');
    divord.className = 'pesTit';
    divord.innerHTML ="Orden: &nbsp; &nbsp; &nbsp; ";
        orden = c('INPUT');   
        orden.name = 'pestania['+(++fn)+'][orden]';
        orden.type = 'text';
        orden.size = '1';
    
  divord.appendChild(orden);
    
    divnom = c('DIV');
    divnom.className = 'pesTit';
    divnom.innerHTML ="Nombre: &nbsp; &nbsp;";
        nombre = c('INPUT');   
        nombre.name = 'pestania['+(fn)+'][nombre]';
        nombre.type = 'text';
        nombre.size = '26';
    
  divnom.appendChild(nombre);
  
    divtit = c('DIV');
    divtit.className = 'pesTit';
    divtit.innerHTML ="Titulo: &nbsp; &nbsp; &nbsp; &nbsp;";
        titulo = c('INPUT');   
        titulo.name = 'pestania['+(fn)+'][titulo]';
        titulo.type = 'text';
        titulo.size = '26';
    
  divtit.appendChild(titulo);
    
    divcon = c('DIV');
    divcon.className = 'pesTit';
    divcon.innerHTML ="Contenido: ";
        contenido = c('textarea');   
        contenido.name = 'pestania['+(fn)+'][contenido]';
        contenido.cols = '34';
        contenido.rows = '8';
        contenido.className = 'tinymce';
    
  divcon.appendChild(contenido);
  
    
    
    
    span.appendChild(divclo);
    span.appendChild(divord);
    span.appendChild(divnom);
    span.appendChild(divtit);
    span.appendChild(divcon);
    container.appendChild(span);
}
removeField = function (evt) {
    cont--;
    if(cont == limit){
        document.getElementById('addPest').style.display="block";
    }
    lnk = f(e(evt));
    span = d(lnk.name);
    span.parentNode.removeChild(span);
}
/*************** Termina Agregar 4 Campos Dinamicos ************************/
</script>
<style>
.pesTit{
    height:30px;
    color:#666;
    font-size:12px;
    font-style:italic;
}
.cssPesta{
    height:290px;
    border-bottom:2px #999 dashed;
    margin-bottom:15px;
    margin-top:15px;
    padding-left:52px;
}
</style>
 
<p>&nbsp;</p>
<form method="post" name="formUsr">
            <table width="400" border="0" align="center" cellpadding="0" cellspacing="0">
              <tr>
                <td height="35" colspan="2" class="menuDivider"><strong>Contenido</strong>
                </td>
              </tr>
              <tr>
                <td width="85" height="35">&nbsp;&nbsp;&nbsp;Nombre:</td>
                <td width="265"><input type="text" name="contenido[nombre]" id="contenido_nombre" /></td>
              </tr>
              <tr>
                <td height="35">&nbsp;&nbsp;&nbsp;Etiqueta:</td>
                <td><input type="text" name="contenido[etiqueta]" id="contenido_etiqueta" /></td>
              </tr>
              <tr>
                <td height="60" valign="top">&nbsp;&nbsp;&nbsp;Descripci&oacute;n:</td>
                <td valign="top"><textarea name="contenido[descripcion]" id="contenido_descripcion" cols="30" rows="3"></textarea></td>
              </tr>
              <tr>
                <td height="20" valign="top">&nbsp;</td>
                <td valign="top">&nbsp;</td>
              </tr>
              <tr>
                <td height="60" valign="top">&nbsp;&nbsp; Pie&nbsp;Legal:</td>
                <td valign="top"><textarea name="contenido[legal]" id="contenido_legal" cols="30" rows="3"></textarea></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td height="30" valign="top">&nbsp;</td>
                <td align="right" valign="bottom">
                <!-- Este boton es el que hace que se agreguen los campos de forma dinamica -->
                <a href="JavaScript:;" id="addPest" onclick="JavaScript:addField();" accesskey="5"  class="main_link">A&ntilde;adir Pesta&ntilde;a</a>
 
          </td>
              </tr>
              <tr>
                <td colspan="2" valign="top">
                      <!-- Aqui se cargan los campos dinamicos --!>
                      <div id="files"></div>
                </td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td align="right">
                <input type="reset" name="btnLimpiar" value="Limpiar" id="btnLimpiar" /> &nbsp; &nbsp;
                <input type="submit" name="btnSave" value="Guardar Contenido" id="btnSave" /></td>
              </tr>
            </table>
            <p>&nbsp;</p>
</form> 
  

Cualquier observacion es bien aceptada.


Aclaro no todo el código es mio, yo solo adecue demasiadas ideas que he visto por toda la web.