IE11 innerHTML strano comportamento

Question

Ho un comportamento molto strano con element.innerHTML in IE11.

Come potete vedere qui: http://pe281.s3.amazonaws.com/index.html, alcune espressioni riotjs non vengono valutate.

Ho rintracciato il basso per 2 cose:
- il segno di euro sopra di esso. È codificato come €, ma ho lo stesso comportamento con \u20AC o €. Succede con tutti i caratteri nell'intervallo dei simboli di valuta e in alcuni altri intervalli. La rimozione o l'utilizzo di un carattere standard non causa il problema.
- Il modo riotjs crea un tag e un modello personalizzati. Fondamentalmente lo fa:

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

Nella risultante e nodo, e.childNodes restituisce il seguente matrice:

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

nodi Ovviamente 2 e 3 dovrebbe essere una sola. Farli dividere fa sì che la rivolta non riconosca un'espressione da valutare, da qui il problema.

Ma c'è di più: il problema non è coerente e, ad esempio, non può essere riprodotto su un violino: https://jsfiddle.net/5wg3zxk5/4/, dove la stringa html viene analizzata correttamente.

Quindi credo che la mia domanda sia: come alcuni caratteri specifici possono cambiare il modo in cui element.innerHTML analizza il suo input? Come può essere risolto?

Answer 1

penso che dovrebbe essere qualcosa di simile:

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

La roba ho rimosso dalle citazioni sembrano essere variabili o altre cose, e non è una stringa, quindi non dovrebbe essere tra virgolette.

Answer 2

.childNodes è una matrice generato (... bene NodeList) che viene riempito con ELEMENT_NODE ma può anche essere riempito con: 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 , ...

probabilmente si desidera nodi solo dal tipo: ELEMENT_NODE(div e così via) e forse anche TEXT_NODE.

Utilizzare un ciclo semplice per mantenere solo quei nodi con .nodeType === Element.ELEMENT_NODE (o semplicemente confrontarlo con il suo enum che è 1).

È anche possibile utilizzare l'alternativa molto più semplice di .children.

Answer 3

Sostituire <br> con <br /> (si tratta di tag a chiusura automatica). IE sta cercando di chiudere i tag per te.Ecco perché hai raddoppiato i tag br