IE innerHTML error

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() {

         


        

Answer 1

You can create your own shim/polyfill of .innerHTML. I have just made some code to fix another problematic aspect of .innerHTML in IE: the clearing of child .innerHTMLs:

You can modify the behavior. Here is some code that prevents garbage collection of otherwise-referenced elements in IE:

if (/(msie|trident)/i.test(navigator.userAgent)) {
 var innerhtml_get = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML").get
 var innerhtml_set = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML").set
 Object.defineProperty(HTMLElement.prototype, "innerHTML", {
  get: function () {return innerhtml_get.call (this)},
  set: function(new_html) {
   var childNodes = this.childNodes
   for (var curlen = childNodes.length, i = curlen; i > 0; i--) {
    this.removeChild (childNodes[0])
   }
   innerhtml_set.call (this, new_html)
  }
 })
}

var mydiv = document.createElement ('div')
mydiv.innerHTML = "test"
document.body.appendChild (mydiv)

document.body.innerHTML = ""
console.log (mydiv.innerHTML)

http://jsfiddle.net/DLLbc/9/

Answer 2

I found that this (innerHTML += "") would cause the table to appear. The down side is that any javascript events applied to the table or elements inside the table are blown away.

var szBR = "\r\n";
var szClass = "myTable";
var szSelector = "#divDisplay123";
var szSelector2 = "divDisplay123";

var pnlID = "myTable2";

var szRtn =
"<table id=\"" + pnlID + "\" class=\"" + szClass + "\" >" + szBR +
"</table>";
$(szSelector).append (szRtn);

for (var y=0; y<10; y++)
{
    var pnlID_TR = pnlID + "_TR_" + y;

    szRtn =
    "   <tr id=\"" + pnlID_TR + "\" class=\"" + szClass + "_TR\">" + szBR +
    "   </tr>";
    $("#" + pnlID).append (szRtn);

    for (var x=0; x<5; x++)
    {
        var pnlID_TD = pnlID + "_TD_" + x + "_" + y;

        szRtn =
        "       <td id=\"" + pnlID_TD + "\" class=\"" + szClass + "_TD\">" + szBR +
        "Hello World2" + szBR +
        "       </td>";
        $("#" + pnlID_TR).append (szRtn);
    }
}

$(szSelector).append ("<HR>");        
document.getElementById (szSelector2).innerHTML += "";

Answer 3

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!