はじめまして.北海道研究所の研究員松村です.
開発していく中で,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