Question

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 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!