javascript - IE11 insideHTML 奇怪的行为

Question

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

正如您所见:http://pe281.s3.amazonaws.com/index.html ，某些 riotjs 表达式不会被求值。

我已经追踪到两件事:
- 其上方的欧元符号。它被编码为 €，但我对 \u20AC 或 € 具有相同的行为。货币符号范围和其他一些范围中的所有字符都会发生这种情况。删除或使用标准字符不会导致问题。
- 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>€</span>
[2]: {
[3]: moment(expiracyDate).format('DD/MM/YYYY')}

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

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

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

Answer 1

.childNodes 是一个生成的数组(...以及 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、...

您可能想要仅节点类型:ELEMENT_NODE(div等..)，也许还有TEXT_NODE。

使用一个简单的循环来仅保留那些具有 .nodeType === Element.ELEMENT_NODE 的节点(或者将其与其枚举 1 进行比较)。

您也可以使用更简单的 .children 替代方案。