textareaの内容を偽物のtextareaにコピーすると一部の文字が消える

本物のtextarea

偽物にコピー 消去 再読込

偽物のtextarea

本物に返す 消去

ソース

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript"><!--
function copyData(){
 myTEXT = mess.value;
 myTEXT0 = myTEXT.replace(/\r\n|\n|\r/g,"<br>"+"\r\n");
 tarea.innerHTML = myTEXT0;
}
function backData(){
 myTEXT1 = $('#tarea').text();
 mess.value = myTEXT1;
}
function clearData(x){
 x.value = "";
 x.innerHTML = "";
}
// --></script>
<div>本物のtextarea</div>
<textarea id="mess" style="width:450px;height:200px;" tabindex="1" accesskey="i">
&lt;a&gt;１行目
&amp;lt;a&amp;gt;２行目
&amp;amp;lt;a&amp;amp;gt;３行目
&amp;amp;amp;lt;a&amp;amp;amp;gt;４行目
&amp;amp;amp;amp;lt;a&amp;amp;amp;amp;gt;５行目
</textarea>
<div>
<button onClick="copyData();" tabindex="2" accesskey="c">偽物にコピー</button>
<button onClick="clearData(mess);" tabindex="3" accesskey="d">消去</button>
<button onClick="location.reload(true);" tabindex="5" accesskey="r">再読込</button>
</div>
<div>偽物のtextarea</div>
<div id="tarea" contenteditable="true" style="border:1px inset #ccc;background-color:white;width:450px;height:200px;overflow:auto;">
</div>
<div>
<button onClick="backData();" tabindex="4" accesskey="b">本物に返す</button>
<button onClick="clearData(tarea);" tabindex="6" accesskey="x">消去</button>
</div>