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元素追加到 TABLE ，除非您先将其置于 TBODY < / strong>， 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

我无法在IE中动态添加html元素

1 个答案: