Javascript單頁應用程序在IE11中的奇怪行為

Question

我有一個Javascript單頁應用程序，其中包含很多代碼。

主要思想是我的應用程序創建畫布並根據各種數據在畫布中繪制各種東西。

每個畫布都在div容器內。 每個div容器在畫布旁邊還包含一個段落。

在Chrome和Firefox中一切正常，但在IE 11中發生了一些奇怪的事情：

容器div添加到主文檔后為空。 而且我不知道為什么。

另一個奇怪的事情是，如果我通過在附加容器div的部分之后插入以下代碼來破壞應用程序，那么還會附加畫布和段落，並且可以看到兩個：

var foo = some_var; //where some_var is undefined

因此，代碼是巨大的，但這是一個示例，僅用於說明一下：

A.js文件：

var paragraph = document.createElement("p");
var textnode = document.createTextNode("some text");
var div = document.createElement("div");
paragraph.appendChild(textnode);
div.appendChild(paragraph);
div.appendChild(canvas);

someOBJ.html = div;

B.js文件：

var parent2 = document.getElementById(parentId);
parent2.innerHTML = "";
parent2.style.width = '100%';

//someOBJs is an array of someOBJ from the A.js file
for(var i = 0; i < someOBJs.length; i++){
        parent2.appendChild(someOBJs[i].html);
}

如果在這里插入上面提到的中斷代碼（使用未定義的代碼），那么將附加畫布和段落，否則僅附加div容器（someOBJs [i] .html）

Answer 1

可能與IE中有關innerHTML = "" 錯誤有關。 嘗試使用removeChild清空div：

while (parent2.lastChild) 
  elm.removeChild(parent2.lastChild);

另一方面，由於原因可能與性能有關：使用文檔片段，您可以一次將所有節點附加到DOM，而不必一次接一個：

var elements = document.createDocumentFragment();
for(var i = 0; i < someOBJs.length; i++){
   elements.appendChild(someOBJs[i].html);
}
parent2.appendChild(elements);