IE11 innerHTML奇怪的行为

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应该只有一个。让他们分裂使得暴乱无法识别要评估的表达，因此就是问题。

但还有更多：问题不一致，例如无法在小提琴上复制：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，{{ 1}}，...

您可能希望 NOTATION_NODE （div等等）的仅节点，也许还需要{{ 1}}。

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

您也可以使用更简单的.nodeType === Element.ELEMENT_NODE替代方案。

Answer 2

将<br>替换为<br />（它们是自动关闭标记）。 IE正在尝试为您关闭标签。这就是为什么你加倍br标签

Answer 3

我认为它应该是这样的：

content: {
    flex: 1,            
    paddingTop: 10,
    paddingLeft: 10,
    paddingRight: 10,
    flexDirection: 'column',
    backgroundColor: '#000000',

  },
  transmit: {
    height: 100,    
    borderWidth: 1,    
  },

  messages: {
    flex: 1,
    backgroundColor: '#ffff00',

  }

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