IE11中的Javascript单页应用程序奇怪行为答案

【问题标题】：Javascript single page application strange behavior in IE11IE11中的Javascript单页应用程序奇怪行为
【发布时间】：2016-09-28 12:44:07
【问题描述】：

我有一个 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)

【问题讨论】：

控制台错误？
@mplungjan 如果我不插入破坏代码，则不会显示错误
我看到你在附加canvas，但它是在哪里定义的？我认为我们遗漏了一些代码。
@ps2goat 画布在另一个文件中定义。
您应该将该文件的最少详细信息放在此问题中，否则这对处于类似情况的人没有帮助。

标签： javascript html

【解决方案1】：

可能与 IE 中的 innerHTML = "" 相关的 this bug。尝试使用 removeChild 清空 div：

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

另一方面，原因可能与性能有关：使用 document fragment 您可以一次将所有节点附加到 DOM，而不是一个接一个：

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

【讨论】：