IE innerHTML error

Question

Hi,

This is a little different than the questions that have already been asked on this topic! I used that advice to turn a function like this:

function foo() {

    document.getElementById('doc1').innerHTML = '<td>new data</td>';

}

into this:

function foo() {

    newdiv = document.createElement('div');
    newdiv.innerHTML = '<td>new data</td>';

    current_doc = document.getElementById('doc1');
    current_doc.appendChild(newdiv);

}

But this STILL doesn't work. An "unknown runtime error" occurs on the line containing innerHTML in both cases.

I thought that creating the newdiv element and using innerHTML on that would solve the problem?

Answer 1

It is not possible to create td or tr separately in Internet Explorer. This same problem has existed in other browsers for quite some time too, however latest versions of those do not suffer from that issue any more.

You have 2 options to:

1. Use table specific APIs to add cells/rows. See for example MSDN for insertCell and more
2. Create a utility function, that would help you creating DOM nodes out of strings. In case of a table you would need to wrap up your HTML so that the resulting HTML is always a table and then get required element by tag name.

For example like this:

var oHTMLFactory = document.createElement("span");
function createDOMElementFromHTML(sHtml) {
    switch (sHtml.match(/^<(\w+)/)) {
        case "td":
        case "th":
            sHtml   = '<tr>' + sHtml + '</tr>';
            // no break intentionally left here
        case "tr":
            sHtml   = '<tbody>' + sHtml + '</tbody>';
            // no break intentionally left here
        case "tbody":
        case "tfoot":
        case "thead":
            sHtml   = '<table>' + sHtml + '</table>';
            break;
        case "option":
            sHtml   = '<select>' + sHtml + '</select>';
    }
    oHTMLFactory.innerHTML = sHtml;

    return oAML_oHTMLFactory.getElementsByTagName(cRegExp.$1)[0] || null;
}

Hope this helps!