Comment remplacer un élément DOM enfant par une table, compatible avec Internet Explorer?

Question

J'essaie de comprendre comment modifier le DOM pour remplacer un élément avec une table. Le code suivant montre un snafu que j'ai rencontré: si j'essaie de remplacer un élément par un simple paragraphe, cela fonctionne bien, mais si j'essaie d'utiliser une table, rien n'apparaît dans Internet Explorer 8, bien que d'autres navigateurs fonctionnent encore. Comment puis-je réécrire le code pour le faire fonctionner dans tous les navigateurs?

HTML:

<p> 
<a onclick="replaceElementTest(this);">Replace this text</a> 
</p> 

<p> 
<a onclick="replaceWithTableTest(this);">Replace with test table</a> 
</p> 

JavaScript:

// Works in all browsers 
function replaceElementTest(domElement){ 
    var p = document.createElement("p"); 
    p.innerHTML = "This element got REPLACED!"; 
    domElement.parentNode.replaceChild(p,domElement); 
} 

// Doesn't work in IE8 
function replaceWithTableTest(domElement){ 
    var table, tr, td; 

    table = document.createElement("table"); 
    tr = document.createElement("tr"); 
    td = document.createElement("td"); 
    td.innerHTML = "This element got replaced by a TABLE!" 

    table.appendChild(tr); 
    tr.appendChild(td); 

    domElement.parentNode.replaceChild(table,domElement); 
} 

Answer 1

Merci à Erik Noren pour partager this link:

Remarque Internet Explorer exige que vous créez un tbody élément et l'insérer dans la table lors de l'utilisation du DOM. Comme vous manipulez directement l'arborescence du document, Internet Explorer ne crée pas le tBody, ce qui est automatiquement implicite lors de l'utilisation de HTML.

Ce code JavaScript révisé fonctionne dans IE8:

function replaceWithTableTestA(domElement){ 
    var table, tBody, tr, td; 

    table = document.createElement("table"); 
    tBody = document.createElement("tbody"); 
    tr = document.createElement("tr"); 
    td = document.createElement("td"); 

    table.appendChild(tBody); 
    tBody.appendChild(tr); 
    tr.appendChild(td); 

    td.innerHTML = "This element got replaced by a TABLE!" 

    domElement.parentNode.replaceChild(table,domElement); 
} 

Answer 2

Internet Explorer a quelques problèmes avec les tableaux. La plupart des éléments utilisés dans une table sont en fait en lecture seule et cela peut être à l'origine de certains problèmes que vous rencontrez. Dans un projet sur lequel j'ai travaillé, j'ai fini par remplacer toutes mes tables par des tableaux CSS pour contourner la limitation.

http://support.microsoft.com/kb/239832

Certains documents font référence à l'utilisation de la "Table Object Model" pour faire la manipulation.

http://msdn.microsoft.com/en-us/library/ms532998(VS.85).aspx