jQueryでpreタグ内にテキストを入れると、IEだけ改行が消える

InternetExplorerは、innertHTMLで<pre>にテキストを突っ込むと改行が消え失せる。これ絡みで、jQueryでtextareaから取得した値を加工してpreタグの中に入れようとしたのだけど、Firefoxでは正常なのにIEでは改行が無くなる……というのにものすごくハマったのでメモ。

先に結論

jQueryを用いてIE対応するためには、「textareaからはval()で値を取得し、preタグにはtext()で設定する」ことで解決できる。

<textarea>からの取得

jQueryには、要素からの取得・設定系メソッドにはhtml(), text(), val()の3つがある。つまり、取得に3種類、設定に3種類で、3x3=9種類の方法があるわけだ……。メンドいけど以下のようなソースで9種類試してみた。

<script type="text/javascript">
$(function() {
  $("input#my-submit").click(function() {
    var data = $("textarea#inputdata").html();
//    var data = $("textarea#inputdata").text();
//    var data = $("textarea#inputdata").val();
    $("pre#result_html").html(data);
    $("pre#result_text").text(data);
    $("pre#result_val").val(data);
  });
});
</script>
……
（省略）
……
<p><textarea id="inputdata" name="yaml" rows="10" cols="80">1: Apple
2: Orange
3:
  - Banana
  - Grape
  - Strawberry
</textarea></p>

<p>
<input type="button" id="my-submit" value="チェックする"></input>
</p>

<p>チェック結果</p>
<pre id="result_html"></pre>
<pre id="result_text"></pre>
<pre id="result_val"></pre>

このうち、IEで期待通りに正常動作したのは「val()で取得、text()で設定」だけだった。

以下の図のようにhtml()で設定すると改行が消えるし、val()で設定しても何も表示されない（val()で設定というのはvalue属性に値を設定するので、preタグに使えないのは当たり前だが……）。