IE11 innerHTML strange behaviour

Question

I have very strange behaviour with element.innerHTML in IE11.

As you can see there: http://pe281.s3.amazonaws.com/index.html, some riotjs expressions are not evaluated.

I've tracked it down to 2 things:
- the euro sign above it. It's encoded as €, but I have the same behaviour with \u20AC or €. It happens with all characters in the currency symbols range, and some other ranges. Removing or using a standard character does not cause the issue.
- The way riotjs creates a custom tag and template. Basically it does this:

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

In the resulting e node, e.childNodes returns the following array:

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

Obviously nodes 2 and 3 should be only one. Have them split makes riot not recognizing an expression to evaluate, hence the issue.

But there's more: The problem is not consistent, and for instance cannot be reproduced on a fiddle: https://jsfiddle.net/5wg3zxk5/4/, where the html string is correctly parsed.

So I guess my question is how can some specific characters change the way element.innerHTML parses its input? How can it be solved?

Answer 1

.childNodes is a generated array (...well NodeList) that is filled with ELEMENT_NODE but may also be filled with: 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, ...

You probably want only nodes from the type: ELEMENT_NODE (div and such..) and maybe also TEXT_NODE.

Use a simple loop to keep just those nodes with .nodeType === Element.ELEMENT_NODE (or just compare it to its enum which is 1).

You can also just use the much more simpler alternative of .children.

Answer 2

Replace <br> with <br /> (they are self-closing tags). IE is trying to close the tags for you. That's why you have doubled br tags

Answer 3

I think it should be something like this:

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

The stuff I removed from the quotes seem to be variables or other stuff, and not a string, so it should not be in quotes.