如果我将某些内容写到innerHTML中，如何获得准确的副本？

Question

I have string and I want to write this string into innerHTML property and then later on I want to compare these two strings. Basicaly I want something like this:

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

Then do comparison

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

by running this code I get false result for the string above because sequence áé gets translated to áé and thus strings don't match. The closest I got to desired result was to use little hack and create temporary element write to it and then compare with data extracted from it. It works fine, but it doesn't feel right to do it this way.

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

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

So my question is:

• is there any way how to get back exact copy of what I wrote into innerHTML?
• or is there a simple way to transform data, so they match?
• or is my hack just standard way how to do this kind of things?

To put it into context I am generating data, then transform it into JSON. This JSON output is then read in javascript by JSON.parse() and result is inserted into various tags. I am checking difference first, because when new data differs from old data, then other actions take place too. I have also tried things like unescape() but it doesn't work on this kind of escaping. And yes, there is still option to store raw strings in Map and compare these.

Here is little more complete demonstration code which I also put on 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

The short answer is no; The HTML is just a display layer and you shouldn't rely on it for storing data, only showing it.

The browser will do whatever it needs to the innerHTML to make it renderable. The string is just a representation of the DOM structure inside that element. So once you've passed your string to innerHTML, it converts it to actual DOM elements. Retrieving innerHTML asks the browser to do the opposite; Converting those nodes back to a string however it sees fit. In short, innerHTML is not a variable, it's a function and it isn't actually "storing" anything.

If you want to store an exact copy of something, don't use HTML, it's strictly for display. Instead, store the variables in javascript and associate the id of each element with your variables to do the comparisons. You can then look up those elements by the ID and apply classes to them to trigger animations.