IE11 innerHTML странное поведение

У меня очень странное поведение с element.innerHTML в IE11.

Как вы можете видеть там: http://pe281.s3.amazonaws.com/index.html, некоторые выражения riotjs не оцениваются.

введите описание изображения здесь

Я проследил это до 2 вещей:
- над ним знак евро. Он кодируется как €, но у меня такое же поведение с \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 node, 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 анализирует свой вклад? Как это можно решить?

Ответы

Ответ 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,...

Вероятно, вы хотите, чтобы только узлы из типа: ELEMENT_NODE (div и такие..) и, возможно, также TEXT_NODE.

Используйте простой цикл, чтобы хранить только те узлы с .nodeType === Element.ELEMENT_NODE (или просто сравнить его с его перечислением, которое равно 1).

Вы также можете использовать гораздо более упрощенную альтернативу .children.

Ответ 2

Замените <br> на <br /> (они являются самозакрывающимися тегами). IE пытается закрыть теги для вас. Вот почему вы удвоили теги br

Ответ 3

Я думаю, что это должно быть примерно так:

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

Материал, который я удалял из кавычек, кажется переменным или другим материалом, а не строкой, поэтому он не должен быть в кавычках.