javascript - IE11 innerHTML 奇怪的行为

Question

我在 IE11 中对 element.innerHTML 有非常奇怪的行为。

正如您在此处看到的：http: //pe281.s3.amazonaws.com/index.html，一些riotjs表达式没有被评估。

我已经追踪到两件事：
- 上面的欧元符号。它被编码为€，但我与\u20ACor有相同的行为€。它发生在货币符号范围内的所有字符以及其他一些范围内。删除或使用标准字符不会导致问题。
-riotjs创建自定义标签和模板的方式。基本上它是这样做的：

var html = "{reward.amount.toLocaleString()}<span>&#8364;</span>{moment(expiracyDate).format('DD/MM/YYYY')}";
var e = document.createElement('div');
e.innerHTML = html;

在结果e节点中，e.childNodes返回以下数组：

[0]: {reward.amount.toLocaleString()}
[1]: <span>€&lt;/span>
[2]: {
[3]: moment(expiracyDate).format('DD/MM/YYYY')}

显然节点 2 和 3 应该只有一个。将它们分开会使骚乱无法识别要评估的表达式，因此是问题所在。

但还有更多：问题并不一致，例如无法在小提琴上重现：https ://jsfiddle.net/5wg3zxk5/4/ ，其中正确解析了 html 字符串。

所以我想我的问题是某些特定字符如何改变 element.innerHTML 解析其输入的方式？如何解决？

Answer 1

.childNodes是一个生成的数组（...well NodeList），填充ELEMENT_NODE但也可能填充：ATTRIBUTE_NODE, TEXT_NODE, CDATA_SECTION_NODE, ENTITY_REFERENCE_NODE, ENTITY_NODE, PROCESSING_INSTRUCTION_NODE, COMMENT_NODE, DOCUMENT_NODE, DOCUMENT_TYPE_NODE, DOCUMENT_FRAGMENT_NODE, NOTATION_NODE, ...

您可能只需要以下类型的节点：（div 等..），也许还需要.ELEMENT_NODE TEXT_NODE

使用一个简单的循环来只保留那些节点.nodeType === Element.ELEMENT_NODE（或者只是将它与它的枚举进行比较1）。

您也可以只使用更简单的.children.

Answer 2

替换<br>为<br />（它们是自闭合标签）。IE 正在尝试为您关闭标签。这就是为什么你有双倍的br标签

Answer 3

我认为应该是这样的：

var html = {reward.amount.toLocaleString()}  + "&euro;<br>" +{moment(expiracyDate).format('DD/MM/YYYY')} + " <br>";
var e = document.createElement('div');
e.innerHTML = html;

我从引号中删除的东西似乎是变量或其他东西，而不是字符串，所以它不应该在引号中。