IE innerHTML錯誤

Question

這與已經提出的有關此主題的問題有點不同。我使用的意見，把這樣的功能：

function foo() { 

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

} 

到這一點：

function foo() { 

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

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

} 

但是，這仍然無法正常工作。在兩種情況下，在包含innerHTML的行上都會發生「未知運行時錯誤」。

我認爲創建newdiv元素和使用innerHTML就可以解決問題？

Answer 1

無法在Internet Explorer中單獨創建td或tr。同樣的問題在其他瀏覽器中也存在一段時間，但最新版本的這些問題不再受到這個問題的困擾。

你有2個選項：

1. 表使用特定的API添加 細胞/行。例如，請參閱MSDN for insertCell和更多
2. 創建實用程序函數，即 將幫助您創建超出字符串的DOM節點 。在表格的情況下，您需要包裝HTML，以便生成的HTML始終是一個表格，然後通過標記名稱獲取必需的元素。

例如像這樣：

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; 
} 

希望這有助於！

Answer 2

我發現this（innerHTML + =「」）會導致表出現。反過來說，應用於表或表內元素的任何JavaScript事件都會被吹走。

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

您可以創建自己的.innerHTML填充/填充。我剛剛提出了一些代碼來解決IE中另一個有問題的.innerHTML問題：清除子項.innerHTMLs：

您可以修改該行爲。下面是一些代碼，防止否則引用元素的垃圾收集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/