はじめまして．北海道研究所の研究員松村です．
開発していく中で，JavaScriptのinnerHTMLが特定の状況下でうまくうごかない状況にぶつかりましたので，ご参考までに紹介させていただきます．
innerHTMLは任意の箇所を，動的にゴッソリ書き換えることができるため，非常に便利なコマンドです．
以下のソースコードは，「チェンジ」ボタンを押すと，divタグで囲まれた部分をそのままtextareaに転記するというものです．
<html>
<head>
<script>
<!–
function copyTextarea(){
var inputText = document.getElementById (“before”).innerHTML;
document.getElementById (“after”).innerHTML = inputText;
}
–>
</script>
<title>サンプル</title>
</head>
<body>
<div>
eラーニングツール SmartBrain<br>
20ユーザまで無料！！<br>
お試しください！！
</div>
<hr>
<input value=”チェンジ”>
<hr>
<textarea style=”width:300px;height:100px;”>
SmartBrain，20ユーザまで無料！！
</textarea>
</body>
</html>
しかしながら，このコード，IEにおいてはエラーが生じて動きません．
どうやら，IEにおいてはinnerHTMLにタグを含めるのは禁止されているようです．
では，同じ動作を得るために．．．．．．と，今度はdivタグ内の<br>タグを改行コード（\n）に置換して実行してみます．
しかしながら，今度は改行コードが空白として扱われてしまいました．
どうやら，IEにおいてはinnerHTMLでの改行は空白に置き換えられてしまうようです．
いずれの現象も「ブラウザはIE」「innerHTMLを用いる」という条件で発生します．
それでは，これら2つの状況を回避するためにはどうすればよいのでしょうか．
答えは「innerHTMLで書き換えるのではなく，textareaのvalueを書き換える」です．
×：document.getElementById (“after”).innerHTML = inputText;
○：document.getElementById (“after”).value = inputText;
これで改行込みで動的に書き換えられるようになります．
innerHTMLは便利なので何かと頼りがちですが，思わぬところに伏兵がいるものです．．．．．．
参考にしたURLはコチラ
-OASIS- – 今日のメモ「innerHTMLの改行コードの扱い（JavaScript）
http://pochi.orz.ne.jp/oasis/archive_198.htm
Facebookページもよろしくお願いします
記事の投稿者
a.takeuchi a
