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