我無法在IE中動態添加html元素

Question

我有這個javascript代碼來動態添加html元素。它在Chrome中完美工作，但它在IE中不起作用，沒有任何反應，只是似乎添加了可能是div的空間。請幫幫我！！

<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

在IE，你不能追加一個TR元素的表，除非你先放它在TBODY，THEAD，或TFOOT元素。

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

@Ricardo：這裏有你所需要的短版...

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