javascript - entre - IE11 innerHTML extraño comportamiento

innerhtml php

Question

Tengo un comportamiento muy extraño con element.innerHTML en IE11.

Como puede ver allí: http://pe281.s3.amazonaws.com/index.html , algunas expresiones riotjs no se evalúan.

Lo he rastreado a 2 cosas:
- El signo del euro encima de él. Está codificado como € , pero tengo el mismo comportamiento con /u20AC o € . Sucede con todos los caracteres en el rango de símbolos de moneda y algunos otros rangos. Eliminar o usar un carácter estándar no causa el problema.
- La forma en que riotjs crea una etiqueta y plantilla personalizadas. Básicamente hace esto:

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

En el nodo e resultante, e.childNodes devuelve la siguiente matriz:

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

Obviamente los nodos 2 y 3 deben ser solo uno. Tenerlos divididos hace que los disturbios no reconozcan una expresión para evaluar, de ahí el problema.

Pero hay más: el problema no es consistente y, por ejemplo, no se puede reproducir en un violín: https://jsfiddle.net/5wg3zxk5/4/ , donde la cadena html se analiza correctamente.

Así que supongo que mi pregunta es ¿cómo pueden algunos caracteres específicos cambiar la forma en que element.innerHTML analiza su entrada? ¿Cómo se puede resolver?

Answer 1

Creo que debería ser algo como esto:

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

Las cosas que quité de las comillas parecen ser variables u otras cosas, y no una cadena, por lo que no deberían estar entre comillas.

Answer 2

Reemplazar <br> con <br /> (son etiquetas de cierre automático). IE está intentando cerrar las etiquetas por ti. Es por eso que has doblado las etiquetas br

Answer 3

.childNodes es una matriz generada, pero también se puede rellenar con: TEXT_NODE , CDATA_SECTION_NODE : ENTITY_REFERENCE_NODE .

Probablemente solo desee nodos del tipo: ELEMENT_NODE (div y similares) y tal vez también TEXT_NODE .

Use un bucle simple para mantener solo esos nodos con .nodeType === Element.ELEMENT_NODE (o simplemente compárelo con su enumeración que es 1 ).

También puedes usar la alternativa mucho más simple de .children .