I can't add html elements dynamically in IE

Question

I have this javascript code to add html elements dynamically. It works perfectly in chrome but it doesn´t work in IE, nothing happens, just seems to add spaces that are maybe divs. Please Help Me!!

<script type="text/javascript">
var numero = 0;

evento = function (evt) { 
   return (!evt) ? event : evt;
}


addCampo = function () { 

   nDiv = document.createElement('div');

   nDiv.className = 'material';

   nDiv.id = 'material' + (++numero);

 nTabla = document.createElement('table');
 nTabla.width = '800';
 nTabla.cellPadding = '3';
 nTabla.cellSpacing = '0';
 nTabla.id  = 'formularioContacto';
 nTR = document.createElement('tr');
 nTD4 = document.createElement('td');
 nTD4.className = 'labelEntrega';
 nTD5 = document.createElement('td');
 nTD5.className = 'labelEntrega';
 nTD6 = document.createElement('td');
 nTD6.className = 'labelEntrega';
 nTD7 = document.createElement('td');
 nTD7.className = 'labelEntrega';
 nTD8 = document.createElement('td');
 nTD8.className = 'labelEntrega';
 nTD9 = document.createElement('td');
 nTD9.className = 'labelEntrega';
 nIMG = document.createElement('img');
 nIMG.src = '../../images/btnBuscar1.gif';
 nIMG.width = '100';
 nIMG.height = '28';
 nIMG.name = 'imagen[]';
 nIMG.border = '0';
 nIMG.vAlign = 'bottom';

     nCampo = document.createElement('input');
    nCampo.name = 'codigo'+ (numero);
    nCampo.type = 'text';
    nCampo.size = '10';
    nCampo.id = 'formularioContactoCampoCodigo'+ (numero);

 var onchange1 = "buscaMateriales(this,";
 var onchange2 = numero;
 var onchange3 = ")";
 var onchange = onchange1+onchange2+onchange3;

 nCampo.setAttribute('onchange',onchange);
 //nCampo.style = 'font-family:Arial';



 nCampo1 = document.createElement('input');
        nCampo1.name = 'unidad'+ (numero);
        nCampo1.type = 'text';
 nCampo1.size = '10';
 nCampo1.id = 'formularioContactoCampoUnidad'+ (numero);
 //nCampo1.style = 'font-family:Arial';
 nCampo1.readOnly = 'readonly';

 nCampo4 = document.createElement('input');
    nCampo4.name = 'id'+ (numero);
    nCampo4.type = 'hidden';
 nCampo4.size = '10';
 nCampo4.id = 'formularioContactoCampoID'+ (numero);
 //nCampo4.style = 'font-family:Arial';
 nCampo4.readOnly = 'readonly';


 nCampo2 = document.createElement('input');
        nCampo2.name = 'cantidad'+ (numero);
        nCampo2.type = 'text';
 nCampo2.size = '5';
 nCampo2.id = 'formularioContactoCampoCantidad';
 //nCampo2.style = 'font-family:Arial';

 nCampo3 = document.createElement('input');
        nCampo3.name = 'descripcion'+ (numero);
        nCampo3.type = 'text';
 nCampo3.size = '50';
 nCampo3.id = 'formularioContactoCampoDescripcion'+ (numero);
 //nCampo3.style = 'font-family:Arial';
 nCampo3.readOnly = 'readonly';

 a1 = document.createElement('a');
 a1.name = nDiv.id;
 a1.href = '../../include/consultarMaterial.php?id='+ (numero);
 a1.target = '_blank';


   a = document.createElement('a');

   a.name = nDiv.id;

   a.href = '#';

   a.onclick = elimCamp;

   a.innerHTML = 'Eliminar';

   nDiv.appendChild(nTabla);
   nTabla.appendChild(nTR);

   nTR.appendChild(nTD4);
   nTD4.appendChild(nCampo);
   nTD4.appendChild(nCampo4);   
   nTR.appendChild(nTD5);
   nTD5.appendChild(nCampo1);
   nTR.appendChild(nTD6);
   nTD6.appendChild(nCampo2);
   nTR.appendChild(nTD7);
   nTD7.appendChild(nCampo3);
   nTR.appendChild(nTD8);
   nTD8.appendChild(a1);
   a1.appendChild(nIMG);

 nTR.appendChild(nTD9);
   nTD9.appendChild(a);

   container = document.getElementById('adjuntos');
   container.appendChild(nDiv);
}

elimCamp = function (evt){
   evt = evento(evt);
   nCampo = rObj(evt);
   div = document.getElementById(nCampo.name);
   div.parentNode.removeChild(div);
}

rObj = function (evt) { 
   return evt.srcElement ?  evt.srcElement : evt.target;
}

</script>

Answer 1

In IE, you can't append a TR element to a TABLE unless you first put it in a TBODY, THEAD, or TFOOT element.

Reference: http://webbugtrack.blogspot.com/2007/11/bug-171-dynamic-table-dom-gotcha-in-ie.html

@Ricardo: Here's the short version of what you need...

Table
  +- TBody   <=== This is REQUIRED when building a table DOM in IE
       +- TR
           +-TD
           +-TD
           +-TD

nTabla = document.createElement('table');//create your table
...
nTBody = document.createElement('tbody');//ADD THIS
...
nTR = document.createElement('tr');


nTR.appendChild(nTD);//add TDs to TRs
...
nTBody.appendChild(nTR);//add TRs to TBody
...
nTabla.appendChild(nTBody);//add TBody to Table