$.text(xxx)で改行を出力したい

Question

Ajaxのtext(xxx)を使ってJavascriptからhtmlの文言を書き換える際、改行を含めるにはどうすれば良いでしょうか?

<button type="button" onclick="send()">送信</button>
<div id="result">応答域</div>

$("#result").text("1行目\n2行目");

画面はこうなってほしい

　応答域
    ↓
  1行目
  2行目

実際はこうなってしまう

　応答域
    ↓
  1行目 2行目

textを使って改行を入れ込むにはどうしたら良いかという観点なので、その観点でご回答いただけると助かります。textでは改行を入れ込む方法がない、という回答でもかまいません。textによる改行に結論が持てれば助かります。

Comments

[Daregada]

ついやりがちですが、質問中のJavaScriptコード中で、「text」が「test」と間違って書かれています。

[enoeno]

失礼しました。質問をtextに直しました。(testだったから改行できなかったわけではない)

[Daregada]

タイトルやその前の文章から予想はできますが、本当に「test」と書いてないのかは、あなたにしか分かりません。質問者にはあなたが書いたものしか読めません。

Answer 1

<script>
$(function(){
  $('#btn').on('click',function(){
    $("#result").html("1行目<br>2行目");
  });
});
</script>
<button type="button" id="btn">送信</button>
<div id="result">応答域</div>

追記

どうしてもというならこう

<script>
$(function(){
  $('#btn').on('click',function(){
    $("#result").text("1行目\n2行目");
  });
});
</script>
<button type="button" id="btn">送信</button>
<div id="result" style="white-space:pre">応答域</div>

Comments

[yambejp]

brを改行につかうのは厳密には正しくないですが、とりあえず上記でいけるでしょう。
ちゃんとやるなら１行目2行目をそれぞれ段落にするなど工夫が必要です

[enoeno]

.htmlなら<br>で出来るところは確認していました。
.textならという観点ではいかがでしょうか?

[yambejp]

追記しておきました
style属性をいじれないならjQuery側でcss()で指定しても構いません

[enoeno]

ありがとうございます。white-spaceを勉強してきました！
htmlを更新できない(preにできない)場合、CSSを追加してやる方法もあるとわかりました。
これならpでもdivでも改行は思いのままにできそうです。
色々と勉強になります！！

Answer 2

html()にして<br />

br以外にも方法はありますがtext()だとhtmlはエスケープされるので、実質的に不可です。

Comments

[enoeno]

textだと改行は不可能という結論でしょうか。

[m.ts10806]

「ブラウザで見たときの改行」は結局HTMLを使わなければなりません。
HTMLが実質無効化されるtext()では本要件は満たせません

[enoeno]

ありがとうございました。
リンク先もザザッと読んで.textでは改行できないことに納得しました。

[m.ts10806]

仕様のことなので提示したような公式に準じるドキュメントを確認してください(できれば英語の公式)。

[enoeno]

すいません、別な回答にて書き換えのhtmlタグをpreにすることで.textの中身の改行(\n)が認識できるとの提示をいただき、実現することができましたので、そちらをベストアンサーにさせてください。

Answer 3

HTML上で改行は半角空白に置き換わるので、改行コードを<br>タグと置き換える処理を追加しましょう。
※ この方法の場合 .text('内容')ではなく .html('内容') とする必要があります。

後は<pre>タグに代入するとか。

【<pre>: 整形済みテキスト要素 - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/pre

Comments

[enoeno]

<pre>を使う場合も.htmlですね?

[kei344]

手元に環境があるなら試しましょう。

[enoeno]

.textではうまくいかないですね。
質問は.textならという観点なので.htmlで色々出来ることは確認済みでした。

[kei344]

https://jsfiddle.net/jx4n0t8w/
試し方の問題。あと、後から情報を小出しにするのはやめましょう。

[enoeno]

私の質問の例はdivのところの書き換えでしたが、divをpreにするという意図だったんですね。
私の解釈が悪くそのようにやるという意味だとは思いませんでした。
.text()の中にpreを埋め込んで試してしまいました。
大変失礼しました。
これなら.textで改行を扱えますね。質問の意図に一番合いそうです。
(書き換え場所のhtmlタグにこだわりはない)
ベストアンサーを付け替えておきます。