如何用与 Internet Explorer 兼容的表格替换子 DOM 元素？

Question

我试图弄清楚如何修改 DOM 以用表替换元素。下面的代码显示了我遇到的一个问题：如果我尝试用一​​个简单的段落替换一个元素，它工作正常，但如果我尝试使用表格，则 Internet Explorer 8 中不会显示任何内容，尽管其他浏览器仍然可以工作。如何重写代码以使其适用于所有浏览器？

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

Internet Explorer 在表格方面存在一些问题。表中使用的大多数元素实际上是只读的，这可能会导致您看到的一些问题。在我从事的一个项目中，我最终用 CSS 表替换了所有表以解决该限制。

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

一些文档提到使用“表对象模型”来进行操作。

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

Answer 2

感谢 Erik Noren 分享此链接：

注意 Internet Explorer 要求您在使用 DOM 时创建 tBody 元素并将其插入到 table 中。由于您直接操作文档树，Internet Explorer 不会创建 tBody，这在使用 HTML 时会自动隐含。

修改后的 JavaScript 代码可在 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);
}