innerHTMLに何かを書くと、どのようにして正確なコピーバックが得られますか？

Question

私は文字列を持っていて、この文字列をinnerHTMLプロパティに書き込んで、後でこれらの2つの文字列を比較したいと思います。その後、シーケンスáéがAEので、文字列に変換されますので、私は上記の文字列のための偽の結果を得るため、このコードを実行することにより、比較

if (output.innerHTML == myString) { 
... 
} 

を行う

var myString = "<div>my message with accented áé characters</div>" 
var output = document.getElementById("first") 
output.innerHTML = myString 

：Basicaly私はこのような何かをしたいです一致しません。 私が望む結果が得られた最も近いのは、小さなハックを使用して一時的な要素書き込みを作成し、そこから抽出したデータと比較することでした。それはうまく動作しますが、このようにするのは正しいとは感じません。

var tmp = document.createElement('div'); 
tmp.innerHTML = myString 

if (output.innerHTML == tmp.innerHTML) { 
... 
} 

だから私の質問は次のとおりです。

• は、私はinnerHTMLプロパティに書いたものの正確なコピーを取り戻すためにどのようにどのような方法はありますか？
• か、データを変換する簡単な方法はありますか？
• これは私のハックです。このようなことを行うにはどうすればいいですか？

文脈に入れると、データを生成してからJSONに変換します。このJSON出力は、JSON.parse()によってjavascriptで読み込まれ、結果はさまざまなタグに挿入されます。新しいデータが古いデータと異なる場合は、他のアクションも行われるため、最初に違いを確認しています。 私はunescape()のようなものも試しましたが、この種のエスケープでは動作しません。また、生の文字列をMapに保存して比較するオプションもあります。 ;ここで

は短い答えは何である私もJSFiddle

<div id="first"> </div> 
<div id="resultFirst"></div> 
<br /> 
<div id="second"> </div> 
<div id="resultSecond"></div> 

<script> 
var myString = "&lt;div&gt;my message with accented &#225;&#233; characters&lt;/div&gt;" 
var output = document.getElementById("first") 
var result = document.getElementById("resultFirst") 

output.innerHTML = myString 
if (output.innerHTML == myString) { 
    result.innerText = "TRUE " + myString 
} else { 
    result.innerText = "FALSE " + myString 
} 


var output2 = document.getElementById("second") 
var result2 = document.getElementById("resultSecond") 

var tmp = document.createElement('div'); 
tmp.innerHTML = myString 

output2.innerHTML = myString 
if (tmp.innerHTML == output2.innerHTML) { 
    result2.innerText = "TRUE " + tmp.innerHTML 
} else { 
    result2.innerText = "FALSE " + tmp.innerHTML 
} 
</script> 

Answer 1

に置くもう少し完全なデモコードではありませんHTMLは単なる表示レイヤーなので、データの格納には使用しないでください。

ブラウザは、インナーHTMLにレンダリング可能にするために必要な処理を行います。文字列は、その要素内のDOM構造の単なる表現です。したがって、文字列をinnerHTMLに渡すと、実際のDOM要素に変換されます。 innerHTMLを取得すると、ブラウザはその逆を実行するように要求します。これらのノードを文字列に戻しても、適合していると見なされます。要するに、innerHTMLは変数ではなく、関数であり、実際には何も格納していません。

正確なコピーを保存したい場合は、HTMLを使用しないでください。厳密には表示用です。その代わりに、変数をjavascriptに格納し、各要素のidを変数に関連付けて比較を行います。これらの要素をIDでルックアップし、クラスを適用してアニメーションをトリガーすることができます。