Problem Toggling content of div tags

I'm building a translation website and need to be able to toggle the content of div tags to show how a paragraph looks in each language.

I have used the following code, which works fine:

<script type="text/javascript">
function makeTxt(id,txt){
var obj = document.getElementById(id);
obj.firstChild?obj.firstChild.data=txt:obj.appendChild(document.createTextNode(txt))
}
</script> 

<a onclick="makeTxt('id1','text 1 text 1 text 1 text 1 text 1 text 1 text 1 text 1 text 1')"><img src="image.jpg">
<div id="id1">text 2 text 2 text 2 text 2 text 2 text 2 text 2 text 2 text 2 
text 2 </div>

Code (markup):

What i'd like to do is to have a "restore" image which restores the content to what it was in the original div tags.

Any ideas?

 

You could include a <script> section at the bottom to store, in Javascript, the original contents of the tag

like...

<script>
var old_contents = document.getElementById("id1").innerHTML;
</script>

Code (markup):

then have a link like

<a onClick = "document.getElementById('id1').innerHTML = old_contents">Restore</a>

Code (markup):