Как заменить дочерний элемент DOM таблицей, совместимой с Internet Explorer?

Question

Я пытаюсь выяснить, как изменить DOM, чтобы заменить элемент таблицей.Следующий код показывает snafu, с которым я столкнулся: если я пытаюсь заменить элемент простым абзацем, он работает нормально, но если я пытаюсь использовать таблицу, то в 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 требует, чтобы вы создали элемент tBody и вставили его в таблицу при использовании DOM. Поскольку вы управляете деревом документов напрямую, 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);
}

Answer 2

Internet Explorer имеет некоторые проблемы с таблицами.Большинство элементов, используемых в таблице, фактически доступны только для чтения, и это может вызывать некоторые проблемы, с которыми вы сталкиваетесь.В проекте, над которым я работал, я в итоге заменил все свои таблицы таблицами CSS, чтобы обойти ограничение.

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

Некоторые документы ссылаются на использование "объектной модели таблицы" дляделать манипуляции.

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